├── libs ├── README.md ├── d3 │ └── README.md ├── rxjs │ ├── imgs │ │ └── rxjs.png │ ├── README.md │ └── demo │ │ └── use-with-vue.html ├── vue │ ├── plugin │ │ └── vue-cli.md │ ├── elementui │ │ ├── bugs.md │ │ └── README.md │ ├── vant │ │ └── README.md │ ├── mint │ │ └── README.md │ ├── README.md │ ├── intro.md │ ├── perfomance.md │ ├── demos │ │ └── scoped-slot.html │ └── experience │ │ └── demo │ │ └── aysnc-update.html ├── jQuery │ ├── iterator.md │ ├── animate.md │ ├── question.md │ ├── about.md │ ├── README.md │ └── answer.md ├── game │ └── README.md ├── nuxt │ └── README.md ├── react │ ├── demos │ │ ├── index.html │ │ └── hello-world.html │ ├── project.md │ └── redux-suga.md ├── underscore&lodash │ ├── sourcecode │ │ ├── chain │ │ │ └── index.html │ │ ├── signup.md │ │ └── content.md │ └── README.md ├── reactVsVue.md ├── graphql │ └── README.md ├── Polymer.md └── mockjs │ └── overview.md ├── language ├── ts │ └── demo │ │ ├── complex.ts │ │ ├── hello-world.js │ │ ├── hello-world.ts │ │ ├── interface.js │ │ ├── interface.ts │ │ ├── data-type.js │ │ └── data-type.ts ├── css │ ├── tool │ │ ├── cheatsheet │ │ │ ├── index.html │ │ │ └── README.md │ │ └── best-practice │ │ │ ├── id-or-class.md │ │ │ ├── BEM │ │ │ └── overview.md │ │ │ └── critical-css.md │ ├── detail │ │ ├── rules │ │ │ ├── font │ │ │ │ ├── type │ │ │ │ │ ├── README.md │ │ │ │ │ └── vertical-rhythm.md │ │ │ │ ├── README.md │ │ │ │ ├── best-practice.md │ │ │ │ └── web-font.md │ │ │ ├── rules.png │ │ │ ├── border │ │ │ │ ├── image │ │ │ │ │ └── bg.jpg │ │ │ │ ├── README.md │ │ │ │ ├── demo.html │ │ │ │ └── style.css │ │ │ ├── css-shorthand.md │ │ │ ├── text-shadow │ │ │ │ └── README.md │ │ │ ├── filter │ │ │ │ └── README.md │ │ │ ├── clip-path │ │ │ │ ├── style.css │ │ │ │ └── demo.html │ │ │ ├── cursor.md │ │ │ ├── table │ │ │ │ ├── demo │ │ │ │ │ └── table.css │ │ │ │ └── README.md │ │ │ ├── web-font.md │ │ │ ├── media-queries │ │ │ │ └── cheatsheet.md │ │ │ ├── list.md │ │ │ ├── animate │ │ │ │ ├── config.rb │ │ │ │ └── demo │ │ │ │ │ └── views │ │ │ │ │ └── basic.html │ │ │ └── value-and-unit.md │ │ ├── selector │ │ │ └── image │ │ │ │ ├── css1.png │ │ │ │ ├── css2.png │ │ │ │ └── css3.png │ │ ├── responsive │ │ │ ├── device-css-width.png │ │ │ └── README.md │ │ ├── basic │ │ │ ├── property.md │ │ │ ├── place.md │ │ │ └── intro.md │ │ ├── debug │ │ │ └── README.md │ │ ├── value-type │ │ │ └── color.md │ │ ├── compatibility │ │ │ ├── README.md │ │ │ └── browser-compatibility.md │ │ └── inheritance-and-cascade │ │ │ └── ua-style.md │ ├── summary │ │ ├── pic.jpg │ │ ├── style.css │ │ ├── index.html │ │ └── README.md │ └── README.md ├── html │ ├── html5 │ │ ├── video │ │ │ └── README.md │ │ ├── canvas │ │ │ └── README.md │ │ ├── microdata │ │ │ └── README.md │ │ ├── drag-and-drop │ │ │ └── README.md │ │ ├── server-send-events │ │ │ └── README.md │ │ ├── elements-and-attrs │ │ │ ├── README.md │ │ │ ├── picture │ │ │ │ └── image │ │ │ │ │ ├── large.jpg │ │ │ │ │ ├── small.jpg │ │ │ │ │ ├── medium.jpg │ │ │ │ │ └── extralarge.jpg │ │ │ ├── removed-elements.md │ │ │ └── removed-attrs.md │ │ ├── geoloaction │ │ │ └── README.md │ │ ├── camera │ │ │ └── README.md │ │ ├── web-works │ │ │ ├── demo.html │ │ │ ├── demo.js │ │ │ └── work.js │ │ ├── web-storage │ │ │ ├── demo.html │ │ │ └── watch.html │ │ ├── interaction │ │ │ └── README.md │ │ ├── file-api │ │ │ └── README.md │ │ ├── audio │ │ │ └── README.md │ │ └── offline-web-applications │ │ │ └── README.md │ ├── tag-and-attr │ │ ├── HTML-CHEAT-SHEET.png │ │ ├── disabled-readonly.md │ │ └── demo │ │ │ ├── list.html │ │ │ └── article.html │ └── best-practice │ │ └── semantic.md ├── nodejs │ └── plugins.md ├── js │ ├── DOM │ │ ├── overview.png │ │ ├── event.md │ │ ├── dom-content-loaded-vs-load.md │ │ └── valid-input │ │ │ ├── demo.html │ │ │ └── README.md │ ├── grammar │ │ ├── JavaScript+语法知识点.png │ │ ├── date │ │ │ ├── README.md │ │ │ ├── api.md │ │ │ └── next-day.md │ │ ├── truey-falsey │ │ │ ├── README.md │ │ │ └── demo.html │ │ ├── README.md │ │ ├── types │ │ │ ├── README.md │ │ │ ├── object │ │ │ │ ├── practice.md │ │ │ │ └── defineProperty.html │ │ │ ├── string │ │ │ │ └── README.md │ │ │ └── array │ │ │ │ └── method-梳理.md │ │ ├── this │ │ │ └── demo │ │ │ │ └── demo2.html │ │ ├── loop │ │ │ ├── demo.html │ │ │ └── README.md │ │ ├── handle-error │ │ │ └── demo.html │ │ ├── closure │ │ │ └── README.md │ │ ├── function │ │ │ └── README.md │ │ ├── outline.md │ │ └── condition │ │ │ └── README.md │ ├── to-newbie │ │ ├── core-knowledge-tree.md │ │ ├── 值传递和引用传递的区别.md │ │ └── intro.md │ ├── function-programming │ │ └── README.md │ ├── intro │ │ ├── place.md │ │ ├── README.md │ │ └── ECMAScript.md │ ├── debug │ │ ├── wechat.md │ │ └── README.md │ ├── interact-with-server │ │ ├── http │ │ │ ├── cross-domain.md │ │ │ ├── 抓包 │ │ │ │ └── fiddler.md │ │ │ ├── network-basic.md │ │ │ └── README.md │ │ ├── ajax.md │ │ └── cookie.md │ ├── canvas │ │ └── README.md │ ├── transfer-data │ │ ├── web-stroge │ │ │ ├── page2.html │ │ │ └── page1.html │ │ └── post-message │ │ │ ├── page2.html │ │ │ └── page1.html │ ├── BOM │ │ └── README.md │ ├── README.md │ └── nodejs │ │ └── debugger.md ├── postcss │ └── README.md ├── svg │ ├── todo.md │ ├── overview │ │ ├── clip-and-mask.md │ │ ├── attrs.md │ │ ├── path.md │ │ └── shape.md │ ├── demo │ │ ├── demo.svg │ │ └── demo.html │ ├── svg-vs-gif │ │ └── README.md │ └── README.md ├── webGL │ └── README.md └── sass │ └── intro.md ├── software ├── ide │ ├── atom │ │ └── README.md │ ├── sublime │ │ ├── user.sublime-keymap │ │ ├── write-plugin.md │ │ └── Preferences.sublime-settings │ └── .editorconfig ├── node-sass │ ├── README.md │ └── node-sass.zip ├── input-methos │ ├── README.md │ └── rime.md ├── git │ ├── git-imgs │ │ └── git-use-example.jpg │ ├── gitflow.md │ └── 用 GitHub 上展示静态页面的几种方法.md ├── browser │ ├── chrome.md │ └── shortcut.md ├── setup │ ├── mac-setup.md │ └── windows-setup.md ├── terminal │ ├── command-line.md │ └── caniuse-command.md ├── svn.md └── weinre.md ├── key-point ├── weapp │ └── README.md ├── js │ ├── reg │ │ ├── images │ │ │ ├── demo-3.png │ │ │ ├── demo-4.png │ │ │ ├── demo-5.png │ │ │ ├── demo-6.png │ │ │ ├── demo-8.png │ │ │ └── JavaScript+正则.png │ │ └── regulex-demo.png │ └── closure.md ├── css │ ├── layout │ │ └── images │ │ │ ├── float-l.jpg │ │ │ ├── float-r.jpg │ │ │ ├── box-model.png │ │ │ ├── pos-center.jpg │ │ │ └── scence-02.jpg │ └── style │ │ └── img │ │ └── README.md └── react │ ├── redux.md │ ├── hooks │ └── README.md │ └── README.md ├── engineering ├── code-quality │ ├── code-style │ │ ├── prettier │ │ │ └── demo │ │ │ │ ├── .prettierignore │ │ │ │ ├── .prettierrc.js │ │ │ │ ├── package.json │ │ │ │ └── index.js │ │ ├── csslint.md │ │ ├── common.md │ │ ├── html-style-simple.md │ │ └── eslint │ │ │ └── javaScript-standard-style.md │ ├── README.md │ ├── code-review.md │ ├── name │ │ ├── css-classname.md │ │ └── BEM │ │ │ └── overview.md │ ├── page-flow.md │ └── how-to-write-grace-code │ │ └── README.md ├── build-tool │ ├── make │ │ └── README.md │ ├── npm │ │ └── README.md │ ├── README.md │ ├── browserify.md │ └── webpack │ │ └── load-resource-rule.md ├── README.md ├── debug │ └── README.md ├── generator-scaffold │ └── README.md ├── module │ ├── CommonJS-demo │ │ ├── demo.html │ │ └── demo.js │ └── README.md ├── design-project │ ├── project-include-things.md │ └── scaffold-project.md └── package-manage │ ├── npm │ └── README.md │ └── yarn │ └── README.md ├── comprehensive ├── README.md └── animate │ ├── iamge │ ├── show-fps.png │ └── show-composited-layer.png │ └── README.md ├── algorithm ├── 写给大家看的算法书.md ├── data-struct │ └── README.md └── README.md ├── resource ├── article │ └── README.md ├── books │ ├── cover-image │ │ ├── rework.jpg │ │ ├── about-node.jpg │ │ ├── depth-in-d3.jpg │ │ ├── programming-pearls.jpg │ │ ├── css3-core-and-practice.jpg │ │ ├── pic-about-mache-learning.jpg │ │ ├── test-driven-JavaScript.jpg │ │ ├── the-healthy-programmer.jpg │ │ ├── JavaScript-frame-work-design.jpg │ │ ├── learn-responsive-web-design.jpg │ │ ├── pomodoro-technique-illustrated.jpg │ │ ├── the-none-designers-design-book.jpg │ │ └── the-future-of-javascript-2016-and-beyond.pdf │ ├── to-read.md │ ├── note │ │ ├── pomodoro-technique-illustrated.md │ │ └── clean-code.md │ └── my-book.md ├── bug-list.md ├── bookmark │ ├── mail-subscribe.md │ ├── podcast.md │ ├── site.md │ └── tool.md └── good-source-code-list.md ├── scene ├── wechat │ └── miniprogram │ │ ├── content │ │ ├── framework │ │ │ ├── life-cycle.md │ │ │ ├── app.md │ │ │ ├── event.md │ │ │ ├── grammar.md │ │ │ └── component.md │ │ ├── bug.md │ │ └── authorize.md │ │ └── README.md ├── desktop │ ├── electron │ │ └── README.md │ └── nw │ │ └── README.md ├── app │ └── weex │ │ └── README.md └── ctrl-browser │ └── puppeteer │ └── README.md ├── nav-by-tag.md ├── other ├── qiniu.md └── webRTC.md ├── find-jobs ├── assessment │ └── README.md ├── question │ ├── vue.md │ └── README.md ├── resume │ ├── junior-question.md │ └── junior.md └── README.md ├── focus-point ├── security │ ├── 加密.md │ ├── XSS │ │ ├── encode.html │ │ ├── payload.html │ │ └── practice │ │ │ ├── level-3.html │ │ │ ├── level-1.html │ │ │ ├── level-0.html │ │ │ └── level-2.html │ ├── sqlInjection │ │ └── README.md │ └── term.md └── effective │ ├── ide │ ├── vscode-snippent │ │ ├── html.code-snippets │ │ ├── markdown.code-snippets │ │ ├── react.code-snippets │ │ ├── css.code-snippets │ │ └── js.code-snippets │ └── README.md │ └── README.md ├── about-browser ├── README.md └── W3C&WHATWG.md ├── article ├── how-to-learn-framework │ └── README.md ├── code-generator │ └── README.md └── 0-plan.md ├── contribute.md ├── coding-summary.md ├── find-people ├── review-page │ └── junior │ │ └── junior.html ├── target.md ├── people-review.md ├── README.md └── review-question.md ├── marketing └── baidu │ └── tongji.md ├── roadmap └── senior-speed.md ├── .gitignore └── LICENSE.txt /libs/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /language/ts/demo/complex.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /software/ide/atom/README.md: -------------------------------------------------------------------------------- 1 | # atom 2 | -------------------------------------------------------------------------------- /language/css/tool/cheatsheet/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /language/html/html5/video/README.md: -------------------------------------------------------------------------------- 1 | # 视频 -------------------------------------------------------------------------------- /language/html/html5/canvas/README.md: -------------------------------------------------------------------------------- 1 | # 画布(canvas) -------------------------------------------------------------------------------- /key-point/weapp/README.md: -------------------------------------------------------------------------------- 1 | # 微信小程序 2 | 可以通过添加编译模式来改进入的页面。 -------------------------------------------------------------------------------- /language/html/html5/microdata/README.md: -------------------------------------------------------------------------------- 1 | # 微数据(microdata) -------------------------------------------------------------------------------- /language/html/html5/drag-and-drop/README.md: -------------------------------------------------------------------------------- 1 | # 拖放(drag-and-drop) -------------------------------------------------------------------------------- /language/ts/demo/hello-world.js: -------------------------------------------------------------------------------- 1 | console.log('hello world'); 2 | -------------------------------------------------------------------------------- /language/ts/demo/hello-world.ts: -------------------------------------------------------------------------------- 1 | console.log('hello world') 2 | -------------------------------------------------------------------------------- /engineering/code-quality/code-style/prettier/demo/.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /language/html/html5/server-send-events/README.md: -------------------------------------------------------------------------------- 1 | # 服务器发送事件(server send events) -------------------------------------------------------------------------------- /comprehensive/README.md: -------------------------------------------------------------------------------- 1 | # 专题 2 | * [动画](animate) 3 | * [前端性能优化概要](performance) 4 | -------------------------------------------------------------------------------- /engineering/code-quality/code-style/prettier/demo/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | } 3 | -------------------------------------------------------------------------------- /software/node-sass/README.md: -------------------------------------------------------------------------------- 1 | # node-sass 2 | node-sass 上 windows上不太容易装成功。这边保存了份可以用的 node-sass。 3 | -------------------------------------------------------------------------------- /engineering/code-quality/README.md: -------------------------------------------------------------------------------- 1 | # 代码质量 2 | * [做页面流程](page-flow.md) 3 | * [代码Review](code-review.md) -------------------------------------------------------------------------------- /language/nodejs/plugins.md: -------------------------------------------------------------------------------- 1 | # Node.js 插件 2 | * [yargs](https://www.npmjs.com/package/yargs) 获取命令行的参数。 -------------------------------------------------------------------------------- /libs/d3/README.md: -------------------------------------------------------------------------------- 1 | # d3.js 2 | 3 | ## 资源 4 | * [D3 Garden](https://www.rtfmanual.io/d3garden/) 互动学习教程 -------------------------------------------------------------------------------- /libs/rxjs/imgs/rxjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/libs/rxjs/imgs/rxjs.png -------------------------------------------------------------------------------- /algorithm/写给大家看的算法书.md: -------------------------------------------------------------------------------- 1 | # 写给大家看的算法书 2 | ## 什么是算法 3 | 算法是解决问题的步骤。 4 | 5 | 现实生活有很多问题的解决方法蕴含了算法的思想。这其中的代表就是菜谱。 6 | -------------------------------------------------------------------------------- /language/css/detail/rules/font/type/README.md: -------------------------------------------------------------------------------- 1 | # 排版 2 | 3 | ## 拓展阅读 4 | * [汉字标准格式](https://css.hanzi.co/manual/) -------------------------------------------------------------------------------- /resource/article/README.md: -------------------------------------------------------------------------------- 1 | # 文章 2 | * [软技能](soft-skill.md) 3 | * [前端文章收藏](hard-skill.md) 4 | * [我写的文章](mine.md) -------------------------------------------------------------------------------- /language/css/summary/pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/css/summary/pic.jpg -------------------------------------------------------------------------------- /language/js/DOM/overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/js/DOM/overview.png -------------------------------------------------------------------------------- /libs/vue/plugin/vue-cli.md: -------------------------------------------------------------------------------- 1 | # vue-cli 2 | ## 推荐文章 3 | * [Vue-CLI 3.x 搭建多页面项目配置](https://www.jianshu.com/p/98afaf4ca34c) -------------------------------------------------------------------------------- /software/input-methos/README.md: -------------------------------------------------------------------------------- 1 | # 输入法 2 | 我在 Mac 和 Windows 上用的都是RIME中州韻輸入法。 3 | 4 | 什么时候有空，可以倒腾下双拼（一个大写的字母表示多个字符）。 -------------------------------------------------------------------------------- /language/html/html5/elements-and-attrs/README.md: -------------------------------------------------------------------------------- 1 | # html5 标签属性 2 | html5添加和废弃了一些标签，以及属性。 3 | 新标签使得web更语义化，提供了更友好的SEO等。 -------------------------------------------------------------------------------- /software/node-sass/node-sass.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/software/node-sass/node-sass.zip -------------------------------------------------------------------------------- /key-point/js/reg/images/demo-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/js/reg/images/demo-3.png -------------------------------------------------------------------------------- /key-point/js/reg/images/demo-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/js/reg/images/demo-4.png -------------------------------------------------------------------------------- /key-point/js/reg/images/demo-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/js/reg/images/demo-5.png -------------------------------------------------------------------------------- /key-point/js/reg/images/demo-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/js/reg/images/demo-6.png -------------------------------------------------------------------------------- /key-point/js/reg/images/demo-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/js/reg/images/demo-8.png -------------------------------------------------------------------------------- /key-point/js/reg/regulex-demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/js/reg/regulex-demo.png -------------------------------------------------------------------------------- /language/css/detail/rules/rules.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/css/detail/rules/rules.png -------------------------------------------------------------------------------- /resource/books/cover-image/rework.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/rework.jpg -------------------------------------------------------------------------------- /comprehensive/animate/iamge/show-fps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/comprehensive/animate/iamge/show-fps.png -------------------------------------------------------------------------------- /key-point/css/layout/images/float-l.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/css/layout/images/float-l.jpg -------------------------------------------------------------------------------- /key-point/css/layout/images/float-r.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/css/layout/images/float-r.jpg -------------------------------------------------------------------------------- /language/js/grammar/JavaScript+语法知识点.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/js/grammar/JavaScript+语法知识点.png -------------------------------------------------------------------------------- /software/ide/sublime/user.sublime-keymap: -------------------------------------------------------------------------------- 1 | [ 2 | // 按f,h vim 进入的一般模式 3 | { "keys": ["f", "j"], "command": "exit_insert_mode"} 4 | ] 5 | -------------------------------------------------------------------------------- /key-point/css/layout/images/box-model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/css/layout/images/box-model.png -------------------------------------------------------------------------------- /key-point/css/layout/images/pos-center.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/css/layout/images/pos-center.jpg -------------------------------------------------------------------------------- /key-point/css/layout/images/scence-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/css/layout/images/scence-02.jpg -------------------------------------------------------------------------------- /key-point/js/reg/images/JavaScript+正则.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/key-point/js/reg/images/JavaScript+正则.png -------------------------------------------------------------------------------- /resource/books/cover-image/about-node.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/about-node.jpg -------------------------------------------------------------------------------- /resource/books/cover-image/depth-in-d3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/depth-in-d3.jpg -------------------------------------------------------------------------------- /software/git/git-imgs/git-use-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/software/git/git-imgs/git-use-example.jpg -------------------------------------------------------------------------------- /language/css/detail/rules/border/image/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/css/detail/rules/border/image/bg.jpg -------------------------------------------------------------------------------- /language/css/detail/selector/image/css1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/css/detail/selector/image/css1.png -------------------------------------------------------------------------------- /language/css/detail/selector/image/css2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/css/detail/selector/image/css2.png -------------------------------------------------------------------------------- /language/css/detail/selector/image/css3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/css/detail/selector/image/css3.png -------------------------------------------------------------------------------- /libs/vue/elementui/bugs.md: -------------------------------------------------------------------------------- 1 | # 使用注意点 2 | ## 控制 el-dialog 的显示隐藏 3 | 如果，显示 dialog 用`this.$refs.dialog.open()` 在有的浏览器上不显示，用 `:visible.sync="value"` 就没问题。 -------------------------------------------------------------------------------- /libs/vue/vant/README.md: -------------------------------------------------------------------------------- 1 | # Vant 2 | ## 注意点 3 | 如果全局引入。 需删除 `.babelrc` 下的 import 内容。 4 | 5 | ### navBar 6 | 点左侧内容，会触发事件: `clickLeft`。官网文档没写。 7 | 8 | -------------------------------------------------------------------------------- /key-point/css/style/img/README.md: -------------------------------------------------------------------------------- 1 | # 图片处理 2 | object fit,object position. https://css-tricks.com/almanac/properties/o/object-fit/ 3 | 4 | 用背景图的 bgz 5 | -------------------------------------------------------------------------------- /language/html/tag-and-attr/HTML-CHEAT-SHEET.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/html/tag-and-attr/HTML-CHEAT-SHEET.png -------------------------------------------------------------------------------- /scene/wechat/miniprogram/content/framework/life-cycle.md: -------------------------------------------------------------------------------- 1 | # 生命周期 2 | onLoad, onShow, onReady, onHide, onUnload。 页面加载后，先执行 onLoad，然后执行 onShow， 然后执行 onHide。 -------------------------------------------------------------------------------- /resource/books/cover-image/programming-pearls.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/programming-pearls.jpg -------------------------------------------------------------------------------- /language/css/detail/responsive/device-css-width.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/css/detail/responsive/device-css-width.png -------------------------------------------------------------------------------- /comprehensive/animate/iamge/show-composited-layer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/comprehensive/animate/iamge/show-composited-layer.png -------------------------------------------------------------------------------- /libs/jQuery/iterator.md: -------------------------------------------------------------------------------- 1 | # 遍历元素 2 | ## .each 3 | ``` 4 | $( "li" ).each(function( index ) { 5 | console.log( index + ": " + $( this ).text() ); 6 | }); 7 | ``` 8 | -------------------------------------------------------------------------------- /resource/books/cover-image/css3-core-and-practice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/css3-core-and-practice.jpg -------------------------------------------------------------------------------- /resource/books/cover-image/pic-about-mache-learning.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/pic-about-mache-learning.jpg -------------------------------------------------------------------------------- /resource/books/cover-image/test-driven-JavaScript.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/test-driven-JavaScript.jpg -------------------------------------------------------------------------------- /resource/books/cover-image/the-healthy-programmer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/the-healthy-programmer.jpg -------------------------------------------------------------------------------- /nav-by-tag.md: -------------------------------------------------------------------------------- 1 | # 按标签导航 2 | ## 基础知识 3 | 4 | 5 | ## 提升开发效率 6 | 7 | 8 | ## 坑 9 | 10 | 11 | ## 用户体验 12 | 13 | 14 | ## 技巧 15 | 16 | 17 | ## 冷知识 18 | 19 | 20 | -------------------------------------------------------------------------------- /engineering/build-tool/make/README.md: -------------------------------------------------------------------------------- 1 | # Make 文件 2 | * http://www.ruanyifeng.com/blog/2015/02/make.html 3 | * http://www.ruanyifeng.com/blog/2015/03/build-website-with-make.html -------------------------------------------------------------------------------- /other/qiniu.md: -------------------------------------------------------------------------------- 1 | # 七牛图片上传 2 | ## 客户端图片直传 3 | 客户端像服务器拿token，然后客户端直接把图片上传到七牛。这样做可以减轻服务器压力。 4 | 5 | ## 预览图规则 6 | 支持拿任意尺寸的预览图，比如： 要宽高是 `30px` 的预览图。地址写成: `原图?imageView2/1/w/30/h/30`。 -------------------------------------------------------------------------------- /resource/books/cover-image/JavaScript-frame-work-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/JavaScript-frame-work-design.jpg -------------------------------------------------------------------------------- /resource/books/cover-image/learn-responsive-web-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/learn-responsive-web-design.jpg -------------------------------------------------------------------------------- /language/html/html5/elements-and-attrs/picture/image/large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/html/html5/elements-and-attrs/picture/image/large.jpg -------------------------------------------------------------------------------- /language/html/html5/elements-and-attrs/picture/image/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/html/html5/elements-and-attrs/picture/image/small.jpg -------------------------------------------------------------------------------- /resource/books/cover-image/pomodoro-technique-illustrated.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/pomodoro-technique-illustrated.jpg -------------------------------------------------------------------------------- /resource/books/cover-image/the-none-designers-design-book.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/the-none-designers-design-book.jpg -------------------------------------------------------------------------------- /find-jobs/assessment/README.md: -------------------------------------------------------------------------------- 1 | ## 评估自己的技术 2 | * [JS能力评测经典题](https://www.nowcoder.com/ta/js-assessment) 3 | * [测试驱动的方式评估自己的 JavaScript 水平](https://github.com/rmurphey/js-assessment) 4 | -------------------------------------------------------------------------------- /find-jobs/question/vue.md: -------------------------------------------------------------------------------- 1 | # Vue 面试问题 2 | * 数据发生变化，但对应view没有发生变化，可能的原因，及解决方法 3 | * 在数据变化后，如何在对应的view也变化后，做一些操作 4 | * 父组件和子组件如何通信，子组件如何改变父组件的属性 5 | * 兄弟组件间如何通信 6 | * 对单向数据流的理解，解决什么问题，什么时候用 -------------------------------------------------------------------------------- /language/css/detail/rules/css-shorthand.md: -------------------------------------------------------------------------------- 1 | ## 参考 2 | * https://developer.mozilla.org/zh-CN/docs/Web/CSS/Shorthand_properties 3 | * https://docs.webplatform.org/wiki/guides/css_shorthand -------------------------------------------------------------------------------- /language/html/html5/elements-and-attrs/picture/image/medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/html/html5/elements-and-attrs/picture/image/medium.jpg -------------------------------------------------------------------------------- /language/js/to-newbie/core-knowledge-tree.md: -------------------------------------------------------------------------------- 1 | # JavaScript 核心技能树 2 | * 变量和数据类型 3 | * 运算符 4 | * 流程控制语句 5 | * 函数 6 | * 数据类型上的常用方法 7 | * 变量作用域和闭包 8 | * this 9 | * 错误处理机制 10 | * 面向对象 -------------------------------------------------------------------------------- /libs/vue/mint/README.md: -------------------------------------------------------------------------------- 1 | # Mint 2 | ## 注意点 3 | ### Swipe(轮播插件) 4 | 用轮播插件时，一定要设置 `mt-swipe` 的高度。否则高度为0不显示。 5 | 6 | ### 更多 7 | * [mint-ui 填坑之路](https://segmentfault.com/a/1190000009753447) -------------------------------------------------------------------------------- /language/css/tool/best-practice/id-or-class.md: -------------------------------------------------------------------------------- 1 | # 元素上使用id还是class 2 | * ID具有唯一性，Class具有普遍性。 3 | * ID是唯一的，所以尽量在结构外围使用，通常用于页面布局。 4 | * Class是可重复的，所以尽量在结构内部使用，通常用于样式定义。 5 | * ID的样式优先级高于Class。 6 | -------------------------------------------------------------------------------- /language/html/html5/elements-and-attrs/picture/image/extralarge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/language/html/html5/elements-and-attrs/picture/image/extralarge.jpg -------------------------------------------------------------------------------- /language/js/function-programming/README.md: -------------------------------------------------------------------------------- 1 | ## 函数式编程 2 | * [purescript](http://www.purescript.org/) 3 | * [elm](http://elm-lang.org/) 4 | * [Immutable](https://facebook.github.io/immutable-js/) 5 | -------------------------------------------------------------------------------- /libs/game/README.md: -------------------------------------------------------------------------------- 1 | # 游戏 2 | 3 | ## 游戏框架 4 | * PhysicsJS: 基于JavaScript、模块化、可扩展、易于使用的物理引擎，github 5 | * Matter.js: 基于canvas，兼容IE9+，github 6 | * collie：基于Canvas，IE9+ 7 | * Velocity.js 8 | * 白鹭 9 | -------------------------------------------------------------------------------- /resource/books/cover-image/the-future-of-javascript-2016-and-beyond.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamjoel/front-end-note/HEAD/resource/books/cover-image/the-future-of-javascript-2016-and-beyond.pdf -------------------------------------------------------------------------------- /libs/vue/elementui/README.md: -------------------------------------------------------------------------------- 1 | # Element 2 | ## 表单 3 | ``` 4 | 5 | 备选项 6 | 备选项 7 | 8 | ``` -------------------------------------------------------------------------------- /language/ts/demo/interface.js: -------------------------------------------------------------------------------- 1 | var tom = { 2 | name: 'Tom', 3 | age: 20 4 | }; 5 | var jack = { 6 | name: 'Jack', 7 | age: 18, 8 | des: 'My name is Jack', 9 | other: 'xxx' 10 | }; 11 | -------------------------------------------------------------------------------- /focus-point/security/加密.md: -------------------------------------------------------------------------------- 1 | # 加密 2 | 加密： https://www.npmjs.com/package/crypto-js 3 | ## 摘要算法 4 | 不可逆。丢信息。MD5， sha1等都是 摘要算法。 5 | 6 | 加盐： 在加密的结果里加点料,比如加个字符串，或者做点偏倚，目的是为了让彩虹表失效。 7 | 8 | ## 加密算法 9 | 对称加密 和 非对称加密。 AES 是对称算法 -------------------------------------------------------------------------------- /language/css/detail/rules/text-shadow/README.md: -------------------------------------------------------------------------------- 1 | # 文字阴影 2 | 用 text-shadow 可以做很多效果 3 | * 空心字 4 | * 发光字 5 | * 字的模糊 6 | 7 | ## 酷炫Demo 8 | * [Pure CSS 3D perspective render + :hover anim](http://codepen.io/rgg/pen/dPQmZa) 9 | -------------------------------------------------------------------------------- /language/js/intro/place.md: -------------------------------------------------------------------------------- 1 | # 脚本写在哪 2 | 一般放在``前。 3 | 因为当浏览器解析DOM文档时，一旦遇到 script 标签（没有defer 和 async 属性）就会立即下载并执行，与此同时浏览器对文档的解析将会停止。 4 | 5 | ## 参考 6 | * [HTML中的script标签研究](http://segmentfault.com/a/1190000002810487) -------------------------------------------------------------------------------- /about-browser/README.md: -------------------------------------------------------------------------------- 1 | # 关于浏览器 2 | * [How browsers work](http://taligarsiel.com/Projects/howbrowserswork1.htm) 3 | * [W3C](http://www.chinaw3c.org/about.html) 和 [WHATWG](https://whatwg.org/) 均为定web标准的组织 [他们的故事](W3C&WHATWG.md) -------------------------------------------------------------------------------- /engineering/README.md: -------------------------------------------------------------------------------- 1 | # 前端工程化 2 | * [项目架构](design-project) 3 | * [项目模板](generator-scaffold) 4 | * [构建工具](build-tool) 5 | * [代码质量](code-quality) 6 | * [模块化](module) 7 | * [包管理/第三方依赖管理](package-manage) 8 | * [调试&日志](debug) 9 | -------------------------------------------------------------------------------- /language/css/detail/rules/filter/README.md: -------------------------------------------------------------------------------- 1 | # 滤镜 2 | sepia，saturate 等可以改变颜色。 3 | drop-shadow 做阴影。 4 | blur 毛玻璃效果 play.csssecrets.io/frosted-glass 5 | 6 | ## 参考 7 | * [CSS Filters](http://css3.bradshawenterprises.com/filters/) -------------------------------------------------------------------------------- /language/css/detail/rules/clip-path/style.css: -------------------------------------------------------------------------------- 1 | .item{ 2 | width: 100px; 3 | height: 100px; 4 | background-color: #f00; 5 | margin: 50px auto; 6 | } 7 | .triangle{ 8 | -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%); 9 | } -------------------------------------------------------------------------------- /language/html/html5/geoloaction/README.md: -------------------------------------------------------------------------------- 1 | # 地理位置(geoloaction) 2 | geolocation API使用户可以向网站可以提供他的地理位置信息。出于隐私的原因，网站要获取用户的地理信息，是需要许可的。 3 | 4 | ## 参考 5 | * https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation -------------------------------------------------------------------------------- /libs/jQuery/animate.md: -------------------------------------------------------------------------------- 1 | # [动画](http://api.jquery.com/animate/) 2 | ``` 3 | $.animate({ 4 | opacity: 0.6, 5 | left: '+=50', 6 | height: 'toggle'// 0 与 原高的切换 7 | }, 2000, function(){ 8 | // 动画完成 9 | }) 10 | ``` 11 | -------------------------------------------------------------------------------- /algorithm/data-struct/README.md: -------------------------------------------------------------------------------- 1 | # 数据结构 2 | * 队列 3 | * 栈 4 | * 单向列表 5 | * 双向列表 6 | * 树 7 | * 图 8 | 9 | 10 | ## 资源 11 | * [Data Structures in JavaScript posts](http://blog.benoitvallon.com/category/data-structures-in-javascript/) -------------------------------------------------------------------------------- /engineering/debug/README.md: -------------------------------------------------------------------------------- 1 | # 调试&日志 2 | * 学会看报错信息。包括调用堆栈。Tip: 用 `console.trace()` 可以输出当前的调用堆栈。 3 | * 断点的使用。普通断点，条件断点，DOM 变化的断点。 4 | * 合适的地方记日志。 `console.log`,`console.debug`,`console.info`,`console.log`,`console.error` 和 `console.assert`。 -------------------------------------------------------------------------------- /language/html/html5/camera/README.md: -------------------------------------------------------------------------------- 1 | # 摄像头 2 | 3 | ## 资源 4 | * [MDN getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) 5 | * [Camera and Video Control with HTML5](https://davidwalsh.name/browser-camera) -------------------------------------------------------------------------------- /engineering/build-tool/npm/README.md: -------------------------------------------------------------------------------- 1 | # npm 2 | ## 使用私有库 3 | 项目创建：.npmrc 或 .yarnrc 文件。 4 | 5 | 设置整个项目的包地址 6 | ``` 7 | registry "https://registry.npm.taobao.org" 8 | ``` 9 | 10 | 设置某个包的地址 11 | ``` 12 | "包名:registry" "包地址" 13 | ``` 14 | -------------------------------------------------------------------------------- /language/js/debug/wechat.md: -------------------------------------------------------------------------------- 1 | # 在 PC 上调试微信页面 2 | 微信官方的[调试工具](http://blog.qqbrowser.cc/)。需要用QQ浏览器。。。 3 | 4 | ## 更多方法 5 | * [绕过限制，在PC上调试微信手机页面](http://chitanda.me/2015/06/29/debug-wechat-website-in-pc/) 6 | * [微信webview模拟器](http://div.io/topic/729) -------------------------------------------------------------------------------- /software/browser/chrome.md: -------------------------------------------------------------------------------- 1 | # Chrome 2 | 3 | ## 拓展阅读 4 | * [Chrome 技术开发指南](http://wiki.jikexueyuan.com/project/chrome-devtools/evaluating-network-performance.html)、 5 | [Chrome 控制台console的用法](http://segmentfault.com/blog/shibar/1190000002511877) 6 | -------------------------------------------------------------------------------- /language/js/debug/README.md: -------------------------------------------------------------------------------- 1 | # 调试 2 | 3 | ## Chrome 控制台 4 | * [Chrome Devtools Tips & Tricks](http://mo.github.io/2015/10/19/chrome-devtools.html) 5 | 6 | ## 拓展阅读 7 | * [关于请求被挂起页面加载缓慢问题的追查](http://wayou.github.io/2014/12/31/chrome-request-stalled-problem/) -------------------------------------------------------------------------------- /resource/books/to-read.md: -------------------------------------------------------------------------------- 1 | # 待读书籍 2 | ## 基础 3 | * 计算机是怎样跑起来的 4 | 5 | ## 网络 6 | * 图解TCP IP第5版 7 | 8 | ## 算法 9 | * 算法之美:隐匿在数据结构背后的原理 10 | 11 | ## 安全 12 | * 白帽子讲Web安全 13 | * Web前端黑客技术揭秘 14 | 15 | ## 其他 16 | * 大型网站技术架构:核心原理与案例分析 17 | 18 | 19 | -------------------------------------------------------------------------------- /libs/rxjs/README.md: -------------------------------------------------------------------------------- 1 | # rx.js(RxJS 5) 2 | ## 文档 3 | * [官网(RX 5)](https://github.com/reactivex/rxjs) 4 | * [文档](http://reactivex.io/rxjs/) 5 | * [中文版](http://cn.rx.js.org/manual/overview.html#h315) 6 | * [RP入门](https://github.com/benjycui/introrx-chinese-edition) -------------------------------------------------------------------------------- /focus-point/effective/ide/vscode-snippent/html.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "placehoder-img": { 3 | "prefix": "imgplaceholder", 4 | "body": [ 5 | "\"\"/", 6 | ], 7 | "description": "img placehoder" 8 | } 9 | } -------------------------------------------------------------------------------- /language/html/html5/web-works/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Workers demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /language/postcss/README.md: -------------------------------------------------------------------------------- 1 | # Postcss 2 | 3 | ## 在 Postcss 中使用类似 Sass 的写法 4 | 可以用如下两个库。 5 | * [precss](https://github.com/jonathantneal/precss) 6 | * [postcss-scss](https://github.com/postcss/postcss-scss) 7 | 8 | 但 Sass 的特性支持的不完整。比如，不支持函数，运算符操作支持也有问题。而且 Mixin 的写法和 Sass 不一样。 -------------------------------------------------------------------------------- /engineering/code-quality/code-review.md: -------------------------------------------------------------------------------- 1 | # 代码审查要做哪些 2 | ## 单一职责原则 3 | 一个类只能干一个事情, 一个方法最好也只干一件事情。 4 | 5 | ## 重复代码 6 | 有没有把公用组件，可复用的代码抽取出来。 7 | 8 | ## 错误处理 9 | 有没进行错误处理 10 | 11 | ## 可读性 12 | 代码是否可读，尽可能少的“黑魔法” 13 | 14 | ## 符合定义的编码规范 15 | 如方法命名，缩进，一个方法最多几个参数等等。这块尽可能的用工具来做即可。 -------------------------------------------------------------------------------- /language/svg/todo.md: -------------------------------------------------------------------------------- 1 | ## 概念 2 | viewbox 3 | symbol 4 | 5 | ## svg 动画 6 | 描线动画 dasharray dashoffset js获得parh的总长度 7 | 变形动画。js改path snap path.animate 8 | morphsvg 插件 morpheus 9 | 路径移动 textPath标签。 10 | 图案填充，也可以做动画，填充到文字 11 | svg滤镜比css滤镜更加强大，还可以叠加。 12 | 高斯模糊，物体的运动感。弹窗，幻灯可用 13 | -------------------------------------------------------------------------------- /language/js/to-newbie/值传递和引用传递的区别.md: -------------------------------------------------------------------------------- 1 | 原始类型的值（数值、字符串、布尔值），传递方式是值传递。改变变量值，不会改变原始值。 2 | 3 | 复合类型的值（数组、对象、函数），传递方式是引用传递。变量值存的是原始值的地址。如果给变量重新赋值（如 var a = b; a = c），不会改变改变原始值（b 还是 b）；如果改变量内部内容的值(如 var a = b; a.sth = c)，会改变原始值(b.sth 的值为 c)。 4 | 5 | 具体见看这里： https://segmentfault.com/a/1190000008589594 -------------------------------------------------------------------------------- /engineering/code-quality/code-style/csslint.md: -------------------------------------------------------------------------------- 1 | ## csslint 2 | * [官网](http://csslint.net/) 3 | * [csslint github](https://github.com/stubbornella/csslint) 4 | * [csslint Grunt 插件](https://github.com/gruntjs/grunt-contrib-csslint) 5 | * [csslint 规则](https://github.com/stubbornella/csslint/wiki/Rules) -------------------------------------------------------------------------------- /language/js/grammar/date/README.md: -------------------------------------------------------------------------------- 1 | # 日期(Date) 2 | * [常用方法](api.md) 3 | * 工具库 moment.js 4 | * [时间标准：GMT，UTC 以及DST](time-standard.md) 5 | * [JavaScript 日期之某天的下一天是哪天](next-day.md) 6 | 7 | 8 | 9 | 10 | ## 推荐阅读 11 | * [JS原生Date类型方法的一些冷知识](http://segmentfault.com/a/1190000003710954) 12 | -------------------------------------------------------------------------------- /libs/nuxt/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt.js 2 | ## 常见问题 3 | ### 有些组件会操作DOM，导致报错的处理。 4 | 用 `` 组件。如 5 | ``` 6 | 7 | 8 | ... 9 | 10 | ``` 11 | 12 | ## 常用链接 13 | * [官网](https://nuxtjs.org/) 14 | * [API](https://nuxtjs.org/api) -------------------------------------------------------------------------------- /scene/desktop/electron/README.md: -------------------------------------------------------------------------------- 1 | # [Electron](https://electronjs.org/) 2 | > Build cross platform desktop apps with JavaScript, HTML, and CSS. 3 | 4 | ## 资源 5 | * [Awesome Electron](https://github.com/sindresorhus/awesome-electron) 6 | * [使用 Electron 构建桌面应用](https://zhuanlan.zhihu.com/p/20225295) -------------------------------------------------------------------------------- /key-point/react/redux.md: -------------------------------------------------------------------------------- 1 | # redux 2 | react-redux中connect的装饰器(注解)用法 @connect 来装饰类。 3 | 需要安装插件 4 | [babel-plugin-transform-decorators-legacy](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy)。 5 | 6 | 7 | ## 推荐月度 8 | * [JS 装饰器，一篇就够](https://segmentfault.com/a/1190000014495089) -------------------------------------------------------------------------------- /language/css/detail/rules/font/README.md: -------------------------------------------------------------------------------- 1 | ## 字体 2 | 选择合适的字体，对提高网页的美观度和可读性有着举足轻重的作用。 3 | 4 | ## 内容 5 | * [字体样式规则](grammar.md) 6 | * [字体介绍以及如何选择合适的字体](font.md) 7 | * [web安全字体](http://web.mit.edu/jmorzins/www/fonts.html) 8 | * [Web字体](web-font.md) 9 | * [最佳实践](best-practice.md) 10 | 11 | 12 | -------------------------------------------------------------------------------- /language/css/detail/basic/property.md: -------------------------------------------------------------------------------- 1 | # 属性 2 | 每个 CSS 的属性都有如下的信息 3 | * Value: 合法值&语法 4 | * Initial: 初始值 5 | * Applies to: 该属性适用于的元素。如 `clear` 属性值对块级元素起作用。 6 | * Inherited: 该属性继承与否 7 | * Percentages: 百分比值如何应用 8 | * Media: 该属性适用于的媒体组（media group） 9 | * Computed value: 计算值的计算方式 10 | -------------------------------------------------------------------------------- /language/css/detail/rules/clip-path/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | clip path 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /software/setup/mac-setup.md: -------------------------------------------------------------------------------- 1 | # mac 软件 2 | * [Homebrew](http://brew.sh/) 3 | * [Fish Shell](http://fishshell.com/) 4 | * [云梯的vpn 配置](https://www.secureurdata.com/) 5 | 输入法 6 | * [鼠须管](http://rime.im/) 7 | * 切换全角，半角：shift + 空格 8 | * [SCU](https://github.com/neolee/SCU/) 鼠鬚管图形化配置工具 9 | 10 | -------------------------------------------------------------------------------- /language/js/interact-with-server/http/cross-domain.md: -------------------------------------------------------------------------------- 1 | ### 跨域请求 2 | 3 | 如果是跨域请求，会发 option 请求。预检请求（Preflighted Requests）会检测 4 | * 响应头 Access-Control-Allow-Header 的范围是否大于 Access-Control-Request-Headers。 5 | * 请求域名是否在 Access-Control-Allow-Origin 的值中 6 | * 请求的方法是否在 Access-Control-Allow-Method 中 7 | 8 | 如果满足条件，会报错。 -------------------------------------------------------------------------------- /article/how-to-learn-framework/README.md: -------------------------------------------------------------------------------- 1 | # 如何学习Web前端框架？了解这些，才算熟悉前端框架 2 | 这里的前端框架指：Vue，React，Angular等。 3 | ## 框架安装和运行 4 | 5 | ## 生命周期 6 | 7 | ## 模板语法 8 | * DOM 的控制 9 | * 流程控制 if，for 10 | * 事件 11 | 12 | ## 组件 13 | * 代码封装和复用： 组件。 14 | * 组件间通信。 数据和事件。包括那些单向数据流框架。 15 | 16 | ## 路由 17 | 18 | ## 生态 19 | -------------------------------------------------------------------------------- /key-point/js/closure.md: -------------------------------------------------------------------------------- 1 | # 闭包 2 | ## 什么是闭包 3 | > 闭包就是能够读取其他函数内部变量的函数。闭包就是将函数内部和函数外部连接起来的一座桥梁。 4 | > 阮一峰 5 | 6 | ## 闭包的用途 7 | 闭包最大的两大用处： 8 | 1. 读取函数内部的变量， 9 | 2. 让函数内部的变量的值始终保持在内存中。 10 | 11 | ## 拓展阅读 12 | * [学习Javascript闭包（Closure）](https://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html) -------------------------------------------------------------------------------- /language/css/detail/rules/cursor.md: -------------------------------------------------------------------------------- 1 | # 鼠标样式 2 | 用 cursor 定义,如 3 | ```css 4 | div{ 5 | cursor: pointer; 6 | } 7 | ``` 8 | 常用值 9 | * pointer: 手形 10 | * default: 默认值：箭头 11 | * none: 无 12 | * help: 帮助：问号 13 | * move: 移动: 十字 14 | * wait: 等待： loading 15 | 16 | 更多见 17 | [CSS Cursor](http://css-cursor.techstream.org/) -------------------------------------------------------------------------------- /contribute.md: -------------------------------------------------------------------------------- 1 | # 准则 2 | ## 对于知识点的文件夹下的文件结构 3 | 包含 4 | * README.md: 介绍。包括工具文档，网站等。 5 | * summary: 概要。放文字描述，代码。如果很简单，可以放在 README 中。可选。 6 | * detail：具体知识点介绍。具体知识代码也放在这。 7 | * best-practice 最佳实践。 是否要归属于某个类名？ 8 | * tool 放提升效率的工具。包括 9 | * snippet: 代码片段。可选。 10 | * cheatsheet。 11 | * other: 其他工具。 12 | * practice: 练习。可选。 13 | -------------------------------------------------------------------------------- /language/js/interact-with-server/http/抓包/fiddler.md: -------------------------------------------------------------------------------- 1 | # fiddler 2 | 用 fiddler 来抓手机的包。 3 | 4 | 1 Fiddler 主菜单 Tools -> Fiddler Options…-> Connections页签，选中Allowremote computers to connect。 5 | 6 | 2 手机上，选连接的网络，设置手动HTTP 代理。ip 为电脑的ip，端口是在第一步设置的端口。默认端口是 8888。 7 | 8 | 具体见[这里](http://blog.csdn.net/zshq280017423/article/details/8928616)。 9 | -------------------------------------------------------------------------------- /language/ts/demo/interface.ts: -------------------------------------------------------------------------------- 1 | interface Person { 2 | name: string 3 | age: number 4 | des?: string 5 | [propName: string]: any 6 | } 7 | 8 | var tom: Person = { 9 | name: 'Tom', 10 | age: 20 11 | } 12 | 13 | var jack: Person = { 14 | name: 'Jack', 15 | age: 18, 16 | des: 'My name is Jack', 17 | other: 'xxx' 18 | } -------------------------------------------------------------------------------- /language/svg/overview/clip-and-mask.md: -------------------------------------------------------------------------------- 1 | # 剪切和遮罩 2 | ## 剪切 3 | 只显示制定范围内的内容。下面的代码只显示上半个圆。 4 | 5 | ``` 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ``` 14 | 15 | -------------------------------------------------------------------------------- /language/svg/demo/demo.svg: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | SVG 8 | -------------------------------------------------------------------------------- /libs/react/demos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 导航 6 | 7 | 8 | 13 | 14 | -------------------------------------------------------------------------------- /coding-summary.md: -------------------------------------------------------------------------------- 1 | # 软件开发概论 2 | **[软件开发概论](coding-summary.md)** 3 | 软件开发 主要关注这些问题： 载体，可用性，开发成本，软件质量，安全。 4 | 5 | ## 载体 6 | 根据需求来确定用哪种载体来呈现软件。要考虑的包括： 7 | * PC ，pad，手机，手环，电视，kiosk 屏，车载屏幕。 8 | * H5，APP，微信公众号还是小程序。 9 | * 要兼容哪些设备。 10 | 11 | 了解各个载体的优缺点。 12 | 13 | ## 可用性 14 | 可用性包括 15 | * 能满足要求 16 | 17 | ## 开发成本 18 | 要考虑： 19 | * 框架的选择 20 | 21 | ## 安全 22 | -------------------------------------------------------------------------------- /find-people/review-page/junior/junior.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 初级前端面试 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /comprehensive/animate/README.md: -------------------------------------------------------------------------------- 1 | # 动画 2 | ## 实现方式 3 | * [CSS3 过渡](../../css/transition) 4 | * [CSS3 动画](../../css/animate) 5 | 6 | ## 性能 7 | [Web动画性能介绍](performance.md) 8 | 9 | 10 | [Web动画](http://www.w3cplus.com/animation/web-animation-resources.html) Web动画资源整合 11 | [动效知识总结！给设计师的网页动画设计基础指南](http://www.uisdc.com/introduction-to-webdesign-animation) 12 | -------------------------------------------------------------------------------- /language/js/grammar/truey-falsey/README.md: -------------------------------------------------------------------------------- 1 | # 真值和假值 2 | ## 会进行真值，假值判断的地方 3 | * if，else if 4 | * switch 5 | * while，for 6 | * &&，||：逻辑与逻辑或 7 | * !!： 转化成布尔值 8 | 9 | ## 假值 10 | * undefined 11 | * null 12 | * 0，+0，-0 13 | * NaN 14 | * '' 15 | * "" 16 | * false 17 | 18 | ## 参考 19 | * [Truthy & Falsey](http://james.padolsey.com/javascript/truthy-falsey/) 20 | -------------------------------------------------------------------------------- /algorithm/README.md: -------------------------------------------------------------------------------- 1 | # 算法 2 | * 时间复杂度，空间复杂度 3 | * 数据结构 4 | * 常用算法 5 | * 枚举法（暴力破解） 6 | * 贪心算法 7 | * 迭代法 8 | * 递归 9 | * 分治 10 | * 二分法 11 | * 背包算法 12 | * ... 13 | 14 | ## 资源 15 | * [JavaScript 算法与数据结构](https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md) 16 | * [JS Patterns](http://shichuan.github.io/javascript-patterns/) -------------------------------------------------------------------------------- /language/css/detail/rules/table/demo/table.css: -------------------------------------------------------------------------------- 1 | table { 2 | border-collapse: collapse; 3 | } 4 | table>caption{ 5 | line-height: 30px; 6 | font-weight: bold; 7 | } 8 | 9 | th, 10 | td { 11 | border: 1px solid blue; 12 | padding: 0 10px; 13 | line-height: 24px; 14 | } 15 | 16 | tr:nth-child(even) td{ 17 | background-color: #ddd; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /language/html/html5/web-storage/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 测试storage 6 | 7 | 8 | 在静态服务器上打开。测试localStorage的变化。在本页面改localStorage时，在新选项卡打开wathch.html，那页面监视storage变化，并收到消息 9 | 12 | 13 | -------------------------------------------------------------------------------- /language/html/html5/web-works/demo.js: -------------------------------------------------------------------------------- 1 | var work = new Worker("work.js"); 2 | work.onmessage = function(evt) { 3 | console.log(JSON.stringify(evt.data)); 4 | }; 5 | 6 | work.postMessage({ 7 | id: 1, 8 | end: 10 9 | }); 10 | 11 | 12 | work.postMessage({ 13 | id: 2, 14 | end: 100 15 | }); 16 | 17 | work.postMessage({ 18 | id: 3, 19 | end: 1000 20 | }); -------------------------------------------------------------------------------- /language/html/tag-and-attr/disabled-readonly.md: -------------------------------------------------------------------------------- 1 | # 文本域的 disabled, readonly 2 | ## disabled 3 | ``` 4 | 5 | ``` 6 | 带 disabled 属性的文本域的在表单提交时，是不会提交的。 7 | 8 | ## readonly 9 | ``` 10 | 11 | ``` 12 | 带 readonly 属性的文本域的值不可编辑。在手机浏览器中，带 readonly 属性的文本域获得焦点时不会弹出软键盘。如果用第三方日期插件，就需要将文本域设置成 readonly，否则会出现键盘挡住日历的情况。 13 | -------------------------------------------------------------------------------- /language/js/DOM/event.md: -------------------------------------------------------------------------------- 1 | # 事件 2 | ## 事件类型 3 | 4 | ## 事件冒泡和捕获 5 | 6 | ## 事件委托 7 | 8 | ## 阻止冒泡 9 | 10 | ## 阻止元素的默认行为 11 | 12 | ## mouseover, mouseenter 的差别 13 | * https://api.jquery.com/mouseover/ 进入子元素再出来还是会触发。。。 14 | * https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter 15 | 16 | ## 事件DOMContentLoaded和load的区别 17 | 见[这里](dom-content-loaded-vs-load.md) -------------------------------------------------------------------------------- /libs/vue/README.md: -------------------------------------------------------------------------------- 1 | # Vue.js 2 | * [介绍](intro.md) 3 | * [写法概览](overview.md) 4 | * [Vue2 实用技巧分享](experience) 5 | * [Vue2 的组件通信写法总结](communicate.md) 6 | * 生态 7 | * [vue-cli](plugin/vue-cli.md) 8 | * [vue router](plugin/vue-router-overview.md) 9 | * [vuex](plugin/vuex.md) 10 | * [性能优化](perfomance.md) 11 | * [VueJS 开发常见问题集锦](https://segmentfault.com/a/1190000010230843) -------------------------------------------------------------------------------- /software/ide/sublime/write-plugin.md: -------------------------------------------------------------------------------- 1 | # 写插件 2 | * [文档](http://docs.sublimetext.info/en/latest/reference/plugins.html) 3 | * [插件Demo](http://www.sublimetext.com/docs/plugin-examples) 4 | * [发布一个包](https://packagecontrol.io/docs/submitting_a_package) 5 | * 教程 6 | * [SUBLIME TEXT PLUGIN DEVELOPMENT BASICS](http://engineering.vinted.com/2016/06/27/how-to-write-sublime-plugin/) 7 | -------------------------------------------------------------------------------- /software/ide/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | # https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties 3 | 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | indent_style = space 9 | indent_size = 2 10 | end_of_line = lf 11 | insert_final_newline = true 12 | trim_trailing_whitespace = true 13 | 14 | [*.md] 15 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /language/ts/demo/data-type.js: -------------------------------------------------------------------------------- 1 | { 2 | var name_1 = 'Tom'; 3 | var age = 3; 4 | age = '3 years old'; 5 | var isBoy = true; 6 | var intro = "Hello, my name is " + name_1 + ".\n I'll be " + (age + 1) + " years old next month."; 7 | var res = 'abc'; // any 表示任意类型 8 | res = 3434; 9 | // 用 void 表示没有任何返回值的函数 10 | function doSth() { 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /software/input-methos/rime.md: -------------------------------------------------------------------------------- 1 | # RIME中州韻輸入法引擎 2 | > 聪明的输入法懂我心意 3 | 4 | 可自定制。 5 | 6 | ## 选择方案 7 | Rime 預設輸入方案有：朙月拼音★、語句流★、倉頡★、地球拼音、注音、五筆畫、宮保拼音、速成、五筆、雙拼、粵拼、吳語、中古漢語拼音、emoji、國際音標、袖珍簡化字等。 8 | 9 | 在输入法获得焦点是时候 `Ctrl+\`` 10 | 11 | ## 定制 12 | * 模糊英匹配 13 | * 导入词库 14 | * 皮肤 15 | 16 | ## 快捷键 17 | * 切换全角，半角：shift + 空格 18 | 19 | ## 链接 20 | * [說明書](https://github.com/rime/home/wiki/UserGuide) -------------------------------------------------------------------------------- /engineering/generator-scaffold/README.md: -------------------------------------------------------------------------------- 1 | # 生成项目结构 2 | * [yo](http://yeoman.io/authoring/) 3 | * vue-cli 4 | * [从vue-cli源码学习如何写模板](https://github.com/dwqs/blog/issues/56) 5 | * [如何自定义自己的vue-cli模板](https://juejin.im/post/5a0d03e86fb9a044ff3102be) 6 | * [Metalsmith](https://github.com/segmentio/metalsmith) 静态站生成器。也可以用来生成生成项目解构，[例子](https://github.com/segmentio/metalsmith/tree/master/examples)。 -------------------------------------------------------------------------------- /resource/bug-list.md: -------------------------------------------------------------------------------- 1 | # 浏览器 bug list 2 | * Chrome 的 `` 打开弹出框会很慢，解决方案，用 `` 。 3 | 4 | ## angular 5 | ### 页面跳转 6 | angular 中一个奇怪的bug：点按钮会执行一些异步操作，最终，会跳页面： 7 | $navigate.go("/xxx") 8 | 9 | 发现代码执行了上面那行，但页面并没有跳转，也没有报错。如果在那行代码下加一行： 10 | $timeout(function(){}) 11 | 12 | 页面神奇的能跳转了~ -------------------------------------------------------------------------------- /language/js/grammar/README.md: -------------------------------------------------------------------------------- 1 | ## 语法 2 | * [基本语法](basic) 3 | * [数据类型](types) 4 | * [运算符](operator) 5 | * [数组](array) 6 | * [日期](date) 7 | * [正则](regex) 8 | * [函数](function) 9 | * 流程控制语句 10 | * [条件](condition) 11 | * [循环](loop) 12 | * [错误处理机制](handle-error) 13 | * 解释与执行机制 14 | * 变量提升 15 | * 关于求值：作用域与作用域链 16 | * 面向对象 17 | * 原型与继承 18 | * [this](this) 19 | * [闭包](closure) 20 | * 高阶函数 21 | -------------------------------------------------------------------------------- /language/svg/overview/attrs.md: -------------------------------------------------------------------------------- 1 | # 常见属性 2 | ## 位置 3 | * `x` x 座标 4 | * `y` y 座标 5 | 6 | ## 填充 7 | * `fill` 填充颜色。也就是背景色 8 | * `fill-opacity` 填充色的透明度 9 | 10 | ## 边框 11 | * `stroke` 边框颜色 12 | * `stroke-width` 边框宽带 13 | * `stroke-linecap` 边框结束的地方的形状 14 | * butt用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。 15 | * square的效果差不多，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制。 16 | * round表示边框的终点是圆角，圆角的半径也是由stroke-width控制的。 -------------------------------------------------------------------------------- /language/css/detail/debug/README.md: -------------------------------------------------------------------------------- 1 | # 调试CSS 2 | ## 布局的 Debug 3 | 给元素加 outline 4 | ``` 5 | [].forEach.call($$("*"),function(elem){ 6 | elem.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16); 7 | }) 8 | ``` 9 | 10 | CSS 不支持随机个颜色 11 | ``` 12 | * { 13 | outline: 1px solid #f00; 14 | } 15 | ``` 16 | 17 | ## 拓展阅读 18 | * [调试CSS](https://docs.webplatform.org/wiki/tutorials/debugging_css) 19 | -------------------------------------------------------------------------------- /engineering/module/CommonJS-demo/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /language/html/html5/interaction/README.md: -------------------------------------------------------------------------------- 1 | # 交互 2 | 3 | 一个交互框被两个`---`包围。中间放交互内容。第一行是进行交互框的描述。下面第一块js代码是开始显示的代码内容。第二块js是当用户点解决方案时，显示的答案。第三块js是来验证，用户提交的代码是否正确。 以下是个简单的demo。 4 | 5 | --- 6 | 7 | 创建一个变量`c`,让变量`c`的值为变量`a`和`b`的和。 8 | 9 | ```js 10 | var a = 1; 11 | var b = 2; 12 | ``` 13 | 14 | ```js 15 | var a = 1; 16 | var b = 2; 17 | var c = a + b; 18 | 19 | ``` 20 | 21 | ```js 22 | assert(c === a + b); 23 | ``` 24 | 25 | --- -------------------------------------------------------------------------------- /language/ts/demo/data-type.ts: -------------------------------------------------------------------------------- 1 | { 2 | let name: string = 'Tom' 3 | let age: number = 3 4 | // age = '3 years old' 会因类型不匹配而报错。 5 | let isBoy :boolean = true 6 | let intro: string = `Hello, my name is ${name}. 7 | I'll be ${age + 1} years old next month.` 8 | 9 | let res: any = 'abc' // any 表示任意类型 10 | res = 3434 11 | 12 | // 用 void 表示没有任何返回值的函数 13 | function doSth() : void { 14 | 15 | } 16 | } 17 | 18 | 19 | -------------------------------------------------------------------------------- /libs/jQuery/question.md: -------------------------------------------------------------------------------- 1 | # jQuery 常见问题 2 | * DOM 元素与 jQuery 元素的如何互相转换 3 | * jQuery API 4 | * .attr 和 .prop 有何区别 5 | * .offset 和 .positon 有何区别 6 | * .height，.innerHeight，outerHeight 间有何区别 7 | * 给页面中所有的文本节点外面用 p 标签包裹 8 | * 事件 9 | * $(document).ready 和 $(window).load 有何区别 10 | * jQuery 的事件委托怎么写 11 | * event.target 和 event.currentTarget 有何区别 12 | * mouseleave 和 mouseout 有何区别 13 | * 怎么阻止事件冒泡和元素的默认行为 14 | * 如何解除绑定事件 15 | -------------------------------------------------------------------------------- /engineering/design-project/project-include-things.md: -------------------------------------------------------------------------------- 1 | ## 一个项目包括的内容 2 | 包括的模块 3 | 字 4 | 5 | * 常用颜色 6 | * 链接 的颜色，hover效果 7 | 8 | 栅格系统 9 | 图标库 10 | 表单 form 11 | 12 | * 输入框等UI元素的外观 form__input 13 | * 验证 14 | 15 | 按钮 16 | 17 | * 普通按钮 18 | * 尺寸 19 | * 带图标的按钮 20 | * 只有图标的按钮 21 | 22 | 弹出框 23 | 24 | * 模态，非模态 25 | * 带确定 alert框 26 | * 带取消 confirm框 27 | 28 | 分页 29 | 面包屑 30 | tooltip 31 | 其他 32 | 33 | * 旧浏览器的提示 34 | 35 | -------------------------------------------------------------------------------- /language/html/html5/file-api/README.md: -------------------------------------------------------------------------------- 1 | # File API 2 | 读取通过文件框或拖拽的文件。 3 | 可以读到的信息有 4 | * name 5 | * size 6 | * type 7 | * type 8 | * lastModified 时间戳 9 | 10 | api 11 | * File.getAsDataURL() 经过base64编码的字符串 12 | * File.getAsText(string encoding) 13 | 14 | ## 浏览器兼容性 15 | IE10+支持FileReader，但不支持File。[Can I use](http://caniuse.com/#feat=fileapi) 16 | 17 | ## 拓展阅读 18 | * [MDN File](https://developer.mozilla.org/en-US/docs/Web/API/File) 19 | -------------------------------------------------------------------------------- /language/js/intro/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript 简介 2 | JavaScript是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。 3 | 4 | ## JavaScript 做的事情 5 | 简单来说就是操作数据。页面其实就是 JavaScript 调用浏览器提供的一些接口，操作 HTML， CSS 的将数据展示出来的结果。 6 | 7 | 为了更方便的操作数据，数据根据其存的值进行分类会有不同的类型。 8 | 9 | 一些可重复用的代码可以写成一个函数。 10 | 11 | 对于 jQuery 之类的流程是： 12 | 监听事件，修改数据，根据数据渲染 DOM 13 | 14 | 对于 Vue.js 之类 双向绑定的框架的流程是： 15 | 写数据与 DOM 的对于关系，监听事件，修改数据。框架更加写好的数据与DOM的对应关系来更新 DOM 16 | 。 17 | -------------------------------------------------------------------------------- /language/html/html5/audio/README.md: -------------------------------------------------------------------------------- 1 | # 音频(audio) 2 | 移动端不支持自动播放（autoplay 属性）： 3 | 4 | > 由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。 5 | 6 | 解决方案,在用户点击屏幕后，就播放。依赖用户点击屏幕，呵呵 7 | ``` 8 | var autoElem = vm.$refs.audio 9 | var autoPlay = () => { 10 | autoElem.play() 11 | document.removeEventListener('touchstart', autoPlay) 12 | } 13 | 14 | document.addEventListener('touchstart', autoPlay) 15 | 16 | ``` 17 | 18 | -------------------------------------------------------------------------------- /language/js/grammar/types/README.md: -------------------------------------------------------------------------------- 1 | # 数据类型 2 | JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有六种。（ES6又新增了第七种Symbol类型的值)。这些数据类型分别是： 3 | * [数字](number)： 整数和小数 4 | * [字符串](string)： 字符组成的文本 5 | * 布尔值：true（真）和false（假）两个特定值 6 | * [null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) 7 | * [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined) 8 | * 对象：各种值组成的集合 9 | 10 | -------------------------------------------------------------------------------- /marketing/baidu/tongji.md: -------------------------------------------------------------------------------- 1 | # 百度统计 2 | 3 | ## 单页应用统计如何统计PV 4 | ### History API 模式 5 | 百度统计支持`History API`，不支持`hashchange`。在`百度统计>管理>单页应用`设置中，打开开启按钮即可对SPA进行统计。 6 | 7 | ### hash 模式 8 | 在每次hash变化时，加`PV`。如果用的是 `vue-router`，代码这么写: 9 | 10 | ``` 11 | // 用户访问一个安装了百度统计代码的页面时，不自动发送PV的统计请求 12 | _hmt.push(['_setAutoPageview', false]) 13 | router.beforeEach((to, from, next) => { 14 | _hmt.push(['_trackPageview', `/wechat${to.path}`]) // SPA页面加PV 15 | }) 16 | ``` -------------------------------------------------------------------------------- /roadmap/senior-speed.md: -------------------------------------------------------------------------------- 1 | # Web前端进阶之路: 提升开发效率篇 2 | ## 提升团队的开发效率 3 | ### 敏捷开发 4 | 5 | ### 激励机制 6 | 7 | ### 少做不靠谱的功能 8 | 要进行需求评审。 9 | 10 | ### 同时只做一个项目 11 | 切换项目的时间成本很高。 12 | 13 | ### 代码生成工具 14 | 15 | ### 错误监控平台 16 | 找错快：错误监控[FunDebug](https://www.fundebug.com/) 17 | 18 | ### 参考代码库 19 | 包括：HTML常用业务代码的参考；代码片段的管理。 20 | 21 | ### 知识库 22 | 好用的工具，技术，框架等等。 23 | 24 | 项目文档。 25 | 26 | ### 日常分享和培训 27 | 28 | ## 提升个人的开发效率 29 | ### 脚手架 30 | 31 | ### 学习 32 | 33 | -------------------------------------------------------------------------------- /language/html/html5/web-works/work.js: -------------------------------------------------------------------------------- 1 | postMessage('worker start'); 2 | 3 | onmessage = function (evt) { 4 | controller(evt.data); 5 | }; 6 | 7 | function controller (data) { 8 | setTimeout(function () { 9 | postMessage({ 10 | id: data.id, 11 | res: sum(data.end) 12 | }); 13 | }, 100); 14 | } 15 | 16 | function sum(end) { 17 | var sum = 0; 18 | end = Math.floor(end); 19 | for(var i = 1; i < end;i++){ 20 | sum += i; 21 | } 22 | return sum; 23 | } -------------------------------------------------------------------------------- /language/html/html5/web-storage/watch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 测试storage 7 | 8 | 9 | 10 | 监视storage数据的变化 11 | 12 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /software/terminal/command-line.md: -------------------------------------------------------------------------------- 1 | # 命令行及常用指令介绍 2 | ## 打开方式 3 | 4 | ## 常用指令 5 | 6 | ## FAQ 7 | * [Windows上中文在CMD中乱码的解决](https://github.com/yii2-chinesization/yii-qa/issues/7) 8 | 9 | ## 参考 10 | * [介紹命令行(command-line)介面](http://carolhsu.gitbooks.io/django-girls-tutorial-traditional-chiness/content/intro_to_command_line/README.html) 11 | * [ss64.com](http://ss64.com/) 所有作業系統的的指令 12 | * [命令行的艺术](https://github.com/jlevy/the-art-of-command-line/blob/master/README-zh.md) 13 | -------------------------------------------------------------------------------- /language/webGL/README.md: -------------------------------------------------------------------------------- 1 | # WebGL 2 | WebGL 是 HTML 5 草案的一部分，可以驱动 Canvas 渲染三维场景。 3 | 4 | WebGL 使得在支持HTML 的 canvas 标签的浏览器中，不需要安装任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行3D渲染。 5 | 6 | [three.js](https://github.com/mrdoob/three.js/) 是基于 WebGL 的一个插件。 7 | 8 | ## 拓展阅读 9 | * [MDN WebGL 教程](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial) 10 | * [WebGL Fundamentals](http://webglfundamentals.org/) 11 | * [WebGL 技术储备指南](http://taobaofed.org/blog/2015/12/21/webgl-handbook/) -------------------------------------------------------------------------------- /find-people/target.md: -------------------------------------------------------------------------------- 1 | # 目标 2 | ## 中级前端 3 | 能胜任日常页面开发任务。具体来说： 4 | 5 | ### 后台管理系统 6 | 7 | 8 | ## 手机页面 9 | * [ ] 响应式布局 10 | * [ ] rem 的规则。 11 | * [ ] 媒体查询。常见手机宽度断点。 12 | * [ ] 组件使用 13 | * [ ] Vant UI的使用 14 | * [ ] 加载中。 15 | * [ ] 信息提示。 16 | * [ ] 无限加载。 17 | * [ ] Tab。 18 | * [ ] Cell 组件。 19 | * [ ] 表单类组件。 20 | * [ ] 轮播 21 | * [ ] 滚动方向：水平，垂直。 22 | * [ ] 切换效果：滚动，淡入淡出。 23 | 24 | 25 | ## 高级前端 26 | * 框架选择和搭建。 27 | * 不断优化团队的工作效率。 28 | * 合理安排任务。 29 | * 带新人。 -------------------------------------------------------------------------------- /language/css/detail/rules/table/README.md: -------------------------------------------------------------------------------- 1 | # 表格样式规则 2 | demo见[这里](demo/index.html) 3 | 4 | ## border-collapse 5 | 设置是否将表格边框折叠为单一边框。可选值 6 | * separate 默认值。 table、th 以及 td 元素都有独立的边框 7 | * collapse 表格边框折叠为单一边框 8 | 9 | ## border-spacing 10 | 设置相邻单元格的边框间的距离。仅在`border-collapse:separate;`时生效。可选值 11 | * length length 使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距;如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。 12 | 13 | 如 14 | ``` 15 | border-collapse:separate; 16 | border-spacing:10px 50px; 17 | ``` -------------------------------------------------------------------------------- /language/js/grammar/types/object/practice.md: -------------------------------------------------------------------------------- 1 | # 练习 2 | 判断是否是空对象 3 | 方法1: 4 | ``` 5 | function isEmpty() { 6 | var hasOwnProperty = Object.prototype.hasOwnProperty; 7 | for (var key in obj) { 8 | if (hasOwnProperty.call(obj, key)) return false; 9 | } 10 | 11 | return true; 12 | } 13 | ``` 14 | 15 | 方法2: 16 | ``` 17 | Object.keys(obj).length === 0 18 | 19 | ``` 20 | 21 | 方法3: （兼容性待考察） 22 | ``` 23 | JSON.stringify(obj) === "{}" 24 | ``` 25 | 26 | jQuery 和 underscore 也有方法来判断是否是空对象。 27 | -------------------------------------------------------------------------------- /focus-point/security/XSS/encode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 编码 6 | 7 | 8 |

js出现在html标签中

9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /scene/app/weex/README.md: -------------------------------------------------------------------------------- 1 | # [Weex](https://weex.apache.org/cn/) 2 | > Weex 遵循 Web 标准，同时支持 vue.js 的语法。因此，您可以使用 vue.js 语法来开发应用程序。 3 | 4 | 用 [CocoaPods](https://guides.cocoapods.org/using/getting-started.html) 来装xcode项目的依赖。 5 | 6 | ## 工具 7 | * [eros template](https://github.com/bmfe/eros-template) weex 的脚手架。 8 | 9 | ## 坑 10 | 如果输入 `weex run ios` 报下面的错：`xcrun: error: unable to find utility "instruments", not a developer tool or in PATH` 。 11 | 12 | 解决方案：打开 Xcode，在 Preferences > Locations 选择 Command Line Tools 。 13 | 14 | -------------------------------------------------------------------------------- /software/ide/sublime/Preferences.sublime-settings: -------------------------------------------------------------------------------- 1 | { 2 | // 会导致文件夹不能显示的问题。"dpi_scale": 1.0,// 解决中文文件名显示方框的问题 https://www.zhihu.com/question/24029280 3 | "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme", 4 | "draw_white_space": "all", 5 | "font_size": 14, 6 | "ignored_packages": 7 | [ 8 | ], 9 | "tab_size": 2, 10 | "theme": "Material-Theme.sublime-theme", 11 | "translate_tabs_to_spaces": true, 12 | "highlight_modified_tabs": true, 13 | "show_tab_close_buttons": false 14 | } 15 | -------------------------------------------------------------------------------- /engineering/code-quality/code-style/prettier/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "1.0.0", 4 | "description": "use pritter demo", 5 | "main": "index.js", 6 | "scripts": { 7 | "prettier-watch": "onchange '**/*.js' -- prettier-standard '**/*.js'" 8 | }, 9 | "keywords": [ 10 | "pritter" 11 | ], 12 | "author": "Joel", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "prettier": "1.17.0", 16 | "prettier-standard": "^9.1.1", 17 | "onchange": "^5.2.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /language/html/html5/elements-and-attrs/removed-elements.md: -------------------------------------------------------------------------------- 1 | # 废弃的标签 2 | ## 下面的元素被废弃的原因是用CSS处理可以更好地替代他们 3 | * basefont 4 | * big 5 | * center 6 | * font 7 | * strike 8 | * tt 9 | 10 | ## 下面的元素被废弃的原因是他们的使用破坏了可使用性和可访问性 11 | * frame 12 | * frameset 13 | * noframes 14 | 15 | ## 下面的元素被废弃的原因是不经常使用他们，也会引起混乱，而且其它元素也可以很好地实现他们的功能 16 | * acronym被废弃是因为它经常使页面错乱，可以使用abbr代替 17 | * applet被废弃是因为可以使用object代替 18 | * isindex被废弃是因为使用表单控件代替 19 | * dir被废弃是因为使用ul代替 20 | 21 | 转自 http://www.cnblogs.com/TomXu/archive/2011/12/17/2269168.html 22 | 23 | -------------------------------------------------------------------------------- /libs/vue/intro.md: -------------------------------------------------------------------------------- 1 | # [Vue.js](http://cn.vuejs.org/)介绍 2 | ## 特点 3 | * 易学。API 简洁明了。 4 | * 数据驱动。支持数据的双向绑定。 5 | * 支持组件。 6 | * 轻量级。 7 | * 快速。精确有效的异步批量 DOM 更新。 8 | 9 | ## 重要概念 10 | ### 组件 11 | 组件是自定义元素。用组件来拓展HTML，封装可重用代码。 12 | 13 | ### Slot（插槽） 14 | Slots 允许外部环境将额外的内容组合在组件中。如弹出框组件，弹出的内容外部的定义的，就可以用 Slot 来实现。例如： 15 | 16 | ``` 17 | 18 | xxx 19 | 20 | ``` 21 | 22 | 如果一个组件中有多个Slot，则需要用 Slot 的名字。如 23 | 24 | ``` 25 | 26 |
xxx
27 |
xxx2
28 | 29 | ``` 30 | -------------------------------------------------------------------------------- /focus-point/effective/ide/vscode-snippent/markdown.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "li": { 3 | "prefix": "mdl", 4 | "body": [ 5 | "* " 6 | ], 7 | "description": "li标签" 8 | }, 9 | "a": { 10 | "prefix": "mda", 11 | "body": [ 12 | "[$1]($2)" 13 | ], 14 | "description": "a标签" 15 | }, 16 | "lia": { 17 | "prefix": "mdla", 18 | "body": [ 19 | "* [$1]($2)" 20 | ], 21 | "description": "li中的a标签" 22 | }, 23 | "mdi": { 24 | "prefix": "mdi", 25 | "body": [ 26 | "![$1]($2)" 27 | ], 28 | "description": "img标签" 29 | } 30 | } -------------------------------------------------------------------------------- /libs/underscore&lodash/sourcecode/chain/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | chain 6 | 7 | 8 | 9 | 21 | 22 | -------------------------------------------------------------------------------- /engineering/build-tool/README.md: -------------------------------------------------------------------------------- 1 | # 项目构建工具概览 2 | * Gulp.js 3 | * npm script 4 | * grunt.js 5 | * make 文件 6 | 7 | ## 具体环节的工具 8 | * [webpack](webpack) 9 | * [fjpublish](https://juejin.im/post/59f48fa36fb9a0452724d9ab) 将文件上传到服务器，并构建。 10 | 11 | ## 拓展阅读 12 | * [The Little Book Of Modern Front-end Tooling](https://github.com/tooling/book-of-modern-frontend-tooling) 13 | * [gulp 入门指南](https://github.com/nimojs/gulp-book) 14 | * [GRUNT AND GULP TASKS FOR PERFORMANCE OPTIMIZATION](http://yeoman.io/blog/performance-optimization.html) 一些与性能优化相关的 Grunt 和 Gulp 任务 15 | -------------------------------------------------------------------------------- /language/svg/svg-vs-gif/README.md: -------------------------------------------------------------------------------- 1 | # 用 SVG 做动画和用 GIF 的比较 2 | ## 图像质量 3 | 同一个 SVG 图像在不同像素密度的设备上都的显示的不错；GIF 在低像素密度的设备上显示的不错，在高像素密度的设备上可能会糊。 4 | 5 | ## 颜色和透明度 6 | GIF 图标在某些背景下会有些问题。 7 | 8 | ## 图像大小与动画效果 9 | SVG 图像比 GIF 小；SVG 动画也比 GIF 流畅。 10 | 11 | ## 修改动画 12 | 修改 SVG 动画比 GIF 方便，容易。 13 | 14 | ## 浏览器兼容性 15 | 所有浏览器都支持 GIF；有些浏览器不支持 SVG。 16 | 17 | ## 交互性 18 | 用代码可以控制 SVG 的动画，可以很容易的响应用户的操作，如 hover，focus。GIF 做不到。 19 | 20 | ## 结论 21 | 除了在浏览器兼容性方面，SVG 做动画都比 GIF 有优势。用 SVG 做动画是趋势。 22 | 23 | ## 参考 24 | * [Animated SVG vs GIF](https://sarasoueidan.com/blog/svg-vs-gif/) 25 | -------------------------------------------------------------------------------- /libs/react/demos/hello-world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello world 7 | 8 | 9 | 10 |
11 | 12 | 13 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /software/git/gitflow.md: -------------------------------------------------------------------------------- 1 | # Gitflow工作流 2 | `Gitflow`工作流通过为功能开发、发布准备和维护分配独立的分支，让发布迭代过程更流畅。 3 | 4 | ## 分支 5 | * `master` 可发布的内容 6 | * `develop` 开发的分支。从`master`上fork,测试完成后，合并到`master` 7 | * `feature-x` 某新特性的分支，从`develop`上`fork`,测试完成后，合并到`develop` 8 | * `bugfix-x` 修复某bug的分支，从`develop`上`fork`,测试完成后，合并到`develop` 9 | 10 | 可以用这个工具来简化流程 [gitflow](https://github.com/nvie/gitflow) 11 | 12 | ## 拓展阅读 13 | * [使用GIT FLOW管理开发流程](http://stormzhang.com/git/2014/01/29/git-flow/) 14 | * [git-workflow-tutorial](https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md) 15 | -------------------------------------------------------------------------------- /language/js/interact-with-server/ajax.md: -------------------------------------------------------------------------------- 1 | # ajax 2 | ajax是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）的简称。 3 | 使用ajax可以实现在不重新加载（即刷新）整个页面的情况下与服务器交换数据。 4 | 5 | ## 跨域 6 | 默认情况下，ajax是不支持跨域的。 7 | 如果要跨域主要有两种方式实现 8 | * CORS（跨域资源共享，Cross-Origin Resource Sharing） 需要服务器设置相应头 `Access-Control-Allow-Origin`的值为`*`(任意站)，或具体的域名,如`http://www.google.com`。 支持各种方法 9 | * jsonp 只支持Get 10 | 11 | ## 推荐阅读 12 | * [Ajax 简介[RUNOOB.com]](http://www.runoob.com/ajax/ajax-intro.html) 13 | * [jQuery ajax() 方法 [RUNOOB.com]](http://www.runoob.com/jquery/ajax-ajax.html) 14 | 15 | 16 | -------------------------------------------------------------------------------- /software/svn.md: -------------------------------------------------------------------------------- 1 | # svn 2 | 检出repo代码 3 | ``` 4 | svn checkout 地址 5 | ``` 6 | 7 | 拿最新的代码 8 | ``` 9 | svn update 10 | ``` 11 | 12 | 添加到代码库 13 | ``` 14 | svn add path 15 | ``` 16 | 17 | 删除文件 18 | ``` 19 | svn delete path 20 | ``` 21 | 22 | 提交+推送到服务器 23 | ``` 24 | svn commit -m '修改代码' 25 | ``` 26 | 27 | 解决冲突 28 | ``` 29 | svn resolved 文件路径 30 | ``` 31 | 32 | ignore 文件 33 | 创建 `.svnignore` 文件。然后执行： 34 | 35 | ``` 36 | svn propset svn:ignore -F .svnignore . 37 | ``` 38 | 39 | 40 | [更多命令](https://tortoisesvn.net/docs/nightly/TortoiseSVN_en/tsvn-cli-main.html) 41 | 42 | -------------------------------------------------------------------------------- /language/css/detail/value-type/color.md: -------------------------------------------------------------------------------- 1 | # 颜色 2 | ## 可选值 3 | * 颜色名称，如: red,green,blue等，更多见[这里](http://www.w3school.com.cn/cssref/css_colornames.asp) 4 | * 十六进制，如: #ff0000，#ff6600等。其中前两位代表红，中间两位表示绿，最后两位表示蓝 5 | * rgb，如rgb(255,0,0)。第1,2,3个参数分别表示红，绿，蓝。参数取值范围是0~255 6 | * 还可以是 `currentColor`。 表示是当前计算出的字的颜色。 7 | 8 | 如 9 | ``` 10 | .red{color: #ff0000;} 11 | .bg-red{background: red;} 12 | .bule-border{border: 1px solid rgb(0, 0, 255);} 13 | 14 | div { 15 | color: red; 16 | border: 5px solid currentColor; 17 | box-shadow: 0 0 5px solid currentColor; 18 | } 19 | ``` 20 | 21 | 推荐使用十六进制。 -------------------------------------------------------------------------------- /language/js/canvas/README.md: -------------------------------------------------------------------------------- 1 | # Canvas 2 | ## save 和 restore 3 | save: 保存canvas的当前状态。会被保存的状态包括：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled。 4 | 5 | restore: 将状态恢复到上次保存的状态。 6 | 7 | 更多阅读[Canvas学习：save()和restore()](https://www.w3cplus.com/canvas/canvas-states.html) 8 | 9 | ## 压缩图片 10 | 用 canvas 可以用来压缩图片： 11 | ``` 12 | canvas.toDataURL('image/jpeg', 1 || 0.8 ); //1最清晰，越低越模糊。 13 | ``` 14 | 15 | -------------------------------------------------------------------------------- /find-people/people-review.md: -------------------------------------------------------------------------------- 1 | # 关于面试 2 | 面试就是：了解他当前的技能,是否与当前团队契合，和成长的潜力。 3 | 4 | 当前技能 5 | * 软技能 6 | * 沟通表达能力。 7 | * 解决问题的能力。 8 | * 有哪些优点，缺点。 9 | * 心智。 10 | * 技术能力 11 | * 基础的东西 12 | * 网站优化怎么做？代码如何组织（MVX，单向数据流，BEM等）？ 13 | * 对新技术的了解，yarn，postcss，webpack2 之类的。 14 | 15 | 成长潜力 16 | * 对技术的态度：修改花多久在技术方面；最近在看什么书。 17 | * 眼界：如何获取最新的前端知识。平常上哪些程序员相关的技术网站。 18 | 19 | 我的面试题, [这里](review-question.md)。 20 | 21 | ## 流程 22 | 1. 自我介绍（沟通表达能力）。 23 | 1. 做过的项目介绍（技术能力使用的框架）。根据介绍问些问题。 24 | 1. 遇到哪些问题，解决问题的思路。(解决问题的能力。) 25 | 1. 对我们公司的了解（心智）。 26 | 1. 你理想的团队是怎样的（是否与当前团队契合）？ 27 | 1. 离职原因(心智)。 28 | 1. 还有什么要问我的吗？ -------------------------------------------------------------------------------- /scene/desktop/nw/README.md: -------------------------------------------------------------------------------- 1 | # NW.js 2 | > NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies. 3 | 4 | ## 代码片段 5 | 全屏 6 | ``` 7 | var gui = require('nw.gui'); 8 | var win = gui.Window.get(); 9 | win.maximize(); 10 | ``` 11 | 12 | ## 资源 13 | * [GitHub](https://github.com/nwjs/nw.js) 14 | * [文档](http://docs.nwjs.io) 15 | * [Manifest format](https://github.com/nwjs/nw.js/wiki/Manifest-format) 配置文档。 -------------------------------------------------------------------------------- /language/css/detail/rules/border/README.md: -------------------------------------------------------------------------------- 1 | # 边框 2 | * border-width 3 | * border-style 4 | * border-color 5 | * border 6 | * [border-image](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image) 7 | * border-radius 8 | 9 | 如 10 | ``` 11 | border: 2px solid #f00; 12 | ``` 13 | 14 | box-shadow 和 border-radius 配合，可以做内圆角 15 | ``` 16 | background: tan; 17 | border-radius: .8em; 18 | padding: 1em; 19 | box-shadow: 0 0 0 .6em #655; 20 | outline: .6em solid #655; 21 | ``` 22 | 23 | ## border-radius 24 | 用 border-radius 做的各种形状好玩的按钮， 见[BonBon:Sweet CSS3 Buttons](http://simurai.com/ 25 | archive/buttons) -------------------------------------------------------------------------------- /language/css/detail/compatibility/README.md: -------------------------------------------------------------------------------- 1 | # 浏览器兼容性 2 | ## 概述 3 | 不同浏览器对 Web 标准的支持不同。导致同样的代码在不同的浏览器上**可能**会产生不同的效果。 4 | 5 | 因此，我们有时需要针对浏览器写一些代码来让浏览器的呈现保持某种程度上的一致。 6 | 7 | 8 | 某种程度指：在流程之类的体验上一致的（渐进增强），在一些细节方面，可以部分浏览器不一样（优雅降级）。 9 | 10 | ## 浏览器对特性的支持性 11 | 可以在[Can I use](http://caniuse.com/)上在线查看。 12 | 也可以用类库 Modernizr，以及 CSS的[@supports](http://www.qianduan.net/css-at-supports/)特性. 13 | 14 | ## 对不同浏览器进行不同的处理 15 | 见[css-hack](css-hack.md) 16 | 17 | ## 常见浏览器bug及处理 18 | 见[常见浏览器bug及处理](css-bugs.md) 19 | 20 | ## 资源 21 | * [腾讯浏览器常见问题](http://x5.tencent.com/guide?id=2001) 微信 6.X 以上的内核都是用的腾讯浏览器。 -------------------------------------------------------------------------------- /libs/jQuery/about.md: -------------------------------------------------------------------------------- 1 | # jQuery 介绍 2 | jQuery 是什么？ 官网上是这么说的 3 | > jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. 4 | 5 | 简单来说，jQuery 封装了浏览器原生的操作 DOM 的一些方法；ajax；动画 等。使用 jQuery 的好处主要是： 6 | * 调用 jQuey 的方法基本不需要考虑浏览器兼容性问题。 7 | * 和使用浏览器原生 API 比，可以少写很多代码。这和 jQuery API 的设计有关，并且 jQuery的 API 比浏览器的多不少。 8 | 9 | 10 | -------------------------------------------------------------------------------- /libs/react/project.md: -------------------------------------------------------------------------------- 1 | # react 项目工程相关 2 | ## 脚手架 3 | 4 | * [create react app](https://github.com/facebookincubator/create-react-app) 比较轻量级，只是整合 webpack 和 react-router。 5 | * [roadhog](https://github.com/sorrycc/roadhog) 让 create-react-app 可配的命令行工具。 6 | * [react boilerplate](https://github.com/react-boilerplate/react-boilerplate) 比较重量级，整合了webpack 和 react router, redux, redux suga, reselect 等。不喜欢默认的 [Styled Components](https://github.com/styled-components/styled-components)，可以很容易的替换。 组织代码的理念和我的一样，文件按照页面来分，而不是功能来分。 7 | * [react-redux-universal-hot-example](https://github.com/erikras/react-redux-universal-hot-example) 好久没更新了。。。 -------------------------------------------------------------------------------- /engineering/code-quality/code-style/prettier/demo/index.js: -------------------------------------------------------------------------------- 1 | { 2 | // if 3 | var str = 'a' 4 | if (str.includes('a')) { 5 | console.log('has a') 6 | } else if (str.includes('b') > 4) { 7 | console.log('has b') 8 | } else { 9 | console.log('has nothing') 10 | } 11 | 12 | // loop 13 | var i = 0 14 | while (i < 10) { 15 | i++ 16 | } 17 | i = 4 18 | for (var i = 0; i < 5; i++) { 19 | console.log('xxx') 20 | } 21 | 22 | // String 23 | var str2 = `b ${str} 24 | dddd` 25 | 26 | // Array 27 | var arr = [1, 2, 3] 28 | var arrStrs = ['pizza', 'burger', 'pasta'] 29 | } 30 | -------------------------------------------------------------------------------- /article/code-generator/README.md: -------------------------------------------------------------------------------- 1 | # 如何开发代码生成工具 2 | 无需写代码，用[易企秀](eqxiu.com)能做营销页面，用[Strikingly](https://www.strikingly.com/) 能做网站，用。 3 | APP Maker,appinstitute 做一款APP 4 | 5 | 易企秀，Strikingly 都是代码生成工具。代码生成工具能: 6 | * 降低对开发者的要求。代码生成工具的使用者只需懂业务，不需懂代码。 7 | * 减少重复劳动。 8 | * 提升工作效率。 9 | 10 | ## 哪些场景适合用代码生成工具 11 | 配置项少，出现次数多。 12 | 配置项少：1，代码生成代码量少。2，易用。 13 | 出现次数多： 1， 代码生成工具的能节约的时间多。 14 | 15 | 管理后台的列表和新增，编辑详情页。 16 | 17 | 18 | ## 怎么做 19 | ### 梳理开发流程 20 | 21 | ### 设计配置项 22 | 减少配置项的方式：制定规范来确保一致性：接口规范=>list，add，edit等。 23 | 24 | ### 输出结果 25 | 26 | ## 参考&推荐阅读 27 | * [低代码开发能不能在军用软件领域出现？](https://mp.weixin.qq.com/s/KPj3gz-mIo04izxBdkLHcQ) -------------------------------------------------------------------------------- /language/js/interact-with-server/http/network-basic.md: -------------------------------------------------------------------------------- 1 | # 网络 2 | ## Mac 地址 3 | ifconfig ： en0 中 ether 即为mac 地址 4 | 用“-”分隔的 6 个 十六进制数(每个数占 8 比特)00-00-5D-B8-39-B0 就是 MAC 地址。 其中 00-00-5D 代表制造商,B8-39-B0 代表产品的编号 5 | 6 | ## 子网掩码 7 | 子网掩码中,值为 1 的那些位对应着 IP 地址中的网络地址,后面 值为 0 的那些位则对应着主机地址。 8 | 路由器 也有 ip 9 | 10 | ## DHCP 11 | DHCP 的全称是 Dynamic Host Configuration Protocol(动态主机设 置协议)。 12 | DHCP 服务器上记录着可以被分配到 LAN 内计算机的 IP 地址范围 和子网掩码的值。 13 | 14 | “默认网关”的配置项。通常会把路由器的 IP 地址设置在这里。也就是说路由器就是从 LAN 通往互联网世界的入口 (Gateway)。路由器的 IP 地址也可以从 DHCP 服务器获取。 15 | 16 | 路由器记录 路由表 17 | route print 18 | 19 | ip -> mac : arp 协议。 apr 缓存。 arp -a 20 | 21 | 硬件上发送数据的是网卡。 22 | -------------------------------------------------------------------------------- /language/js/transfer-data/web-stroge/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 用静态服务器打开才行。 11 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /resource/books/note/pomodoro-technique-illustrated.md: -------------------------------------------------------------------------------- 1 | # 番茄工作法图解 2 | ## 内容 3 | * 早上按优先级定一天要做的事情。 4 | * 在一个番茄时间内，只做一件事。若被打断，则结束这个番茄。休息一段时间，开始一个新的番茄。 5 | * 在休息的时候，尽可能放松，不要思考上个番茄或下个番茄的事情。 6 | * 对于打断：如果是不紧要的事情，在计划外的列表中记下。 7 | 8 | ## 待测量 9 | * 一个番茄时间定多久合适？番茄经常被打断，则考虑缩短番茄时间 10 | * 一个番茄后，休息时间要多久。几个番茄后，有一个比较长的分休息时间。 11 | * 一天几个番茄合适。 12 | 13 | ## 问题 14 | 如果番茄的内容被提前完成的怎么办？ 15 | 16 | ## 心目中的番茄工作法软件 17 | * 开始一个番茄。番茄结束后 18 | * 设置 19 | * 可配置默认的 TodoList 20 | * 设置默认的休息要做的事情 21 | * 一天喝 8 杯子 22 | * 每在电脑前工作20分钟，就看看6米外的物体大概20秒 23 | * 一些运动 24 | * 在定 Todolist 的时候可以定番茄数 25 | * 可以改变番茄和休息时间。当然那时间是全局的。 26 | * 番茄被打断时，可写番茄被打断的理由。列出被打断的番茄列表。 27 | -------------------------------------------------------------------------------- /about-browser/W3C&WHATWG.md: -------------------------------------------------------------------------------- 1 | # W3C和WHATWG的纠葛 2 | 2004年，由Firefox、Opera、Apple、Google四大浏览器厂商组成的网页超文本技术工作小组(Web Hypertext Application Technology Working Group)，即WHATWG，宣布制定下一代HTML标准，即HTML5。而当时的万维网联盟(W3C)正在发展在XML和HTML基础上设计的XHTML。 3 | 4 | 于是，W3C和浏览器厂商的第一次大战开始。互联网的未来究竟是由标准组织W3C决定还是由浏览器厂商决定？这场大战的决定性因素在于开发者们站在哪一边。结果很明显，开发者们当然会站在浏览器那边，毕竟浏览器是普通用户接触互联网的唯一途径。W3C于2007年接纳了WHATWG的HTML5草案，并成立了新的HTML工作团队。 5 | 6 | 于是，W3C和浏览器厂商的第一次大战开始。互联网的未来究竟是由标准组织W3C决定还是由浏览器厂商决定？这场大战的决定性因素在于开发者们站在哪一边。结果很明显，开发者们当然会站在浏览器那边，毕竟浏览器是普通用户接触互联网的唯一途径。W3C于2007年接纳了WHATWG的HTML5草案，并成立了新的HTML工作团队。 7 | 8 | W3C拥有微软和苹果，WHATWG拥有谷歌和火狐。 9 | 10 | ## 参考 11 | * [HTML5标准制定完成：浏览器大战能消停吗？](http://www.techug.com/html5-browsers) -------------------------------------------------------------------------------- /language/js/grammar/this/demo/demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 |
text content
9 | 23 | 24 | -------------------------------------------------------------------------------- /language/js/transfer-data/post-message/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 22 | 23 | -------------------------------------------------------------------------------- /engineering/package-manage/npm/README.md: -------------------------------------------------------------------------------- 1 | # npm 2 | npm 的全称是 Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript 开发者下载、安装、上传以及管理已经安装的包。 3 | 4 | ## npm 常用命令 5 | * `npm install 包名@版本` 简写为 `npm i`。如 `npm install npm@latest -g` 6 | * `-g` 7 | * `--save` 保存到 `package.json` 8 | * `-dev` 9 | * `exact` 指定版本。 10 | * `npm init` 初始化项目的 `package.json` 11 | * `npm run 命令` 执行定义在 `package.json` 中定义的 scripts 12 | * `npm root` 查看当前包的安装路径 13 | * `-g` 查看全局的包的安装路径 14 | * `npm doc 包名` 产看 15 | * `npm ls` 查看当前安装的包 16 | * `-g` 17 | * `npm shrinkwrap` 生成当前依赖版本的 `npm-shrinkwrap.json` 18 | * `npm -v` 查看 npm 版本 19 | * `npm help` 20 | 21 | ## 资源 22 | * [npm 官方文档](https://docs.npmjs.com/) 23 | -------------------------------------------------------------------------------- /engineering/module/README.md: -------------------------------------------------------------------------------- 1 | # 模块化 2 | 所谓模块化即是将一个完整的功能按职责划分为一个以上的能够独立完成各自功能的代码块，每个代码块之间相互独立且可以通过接口方式交互。 3 | 4 | ## CommonJS 5 | 是一种基于服务器端（Node）的模块化标准，以这种方式组织的模块都是以同步方式加载的。 6 | 7 | ### 定义模块 8 | 一个单独的文件就是一个模块，每个模块都是一个独立的作用域，也即是说在该模块内部定义的变量无法被其它模块读取。 9 | 10 | 11 | ### 模块输出 12 | 模块只有一个出口module.export对象，我们需要把模块输出的内容放到该对象。 13 | 14 | ### 加载模块 15 | 用require方法来加载模块，该方法读取一个模块并执行，返回文件内部的module.exports对象是一种基于服务器端（Node）的模块化标准，以这种方式组织的模块都是以同步方式加载的。 16 | 17 | 18 | ## AMD(Asynchronous Module Definition) 19 | 是一种基于浏览器端模块化开发的规范，以这种方式组织的模块都是以异步方式加载的。 20 | 21 | 具有代表性的函数库 – RequireJS 22 | 23 | 主要解决2个问题： 24 | * 多个模块可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器； 25 | * js加载的时候浏览器会停止页面渲染，加载文件越多，页面响应时间越长。 26 | 27 | 28 | -------------------------------------------------------------------------------- /focus-point/security/sqlInjection/README.md: -------------------------------------------------------------------------------- 1 | # sql 注入 2 | 3 | ## [sqlmap](https://github.com/sqlmapproject/sqlmap) 4 | > sqlmap 是一个开源的渗透测试工具，可以用来自动化的检测，利用SQL注入漏洞，获取数据库服务器的权限。它具有功能强大的检测引擎,针对各种不同类型数据库的渗透测试的功能选项，包括获取数据库中存储的数据，访问操作系统文件甚至可以通过外带数据连接的方式执行操作系统命令。 5 | 6 | 使用方法 7 | ``` 8 | python sqlmap.py -h 9 | ``` 10 | 11 | 使用demo 12 | ``` 13 | python sqlmap.py -u "http://someurl?name=a" --eval="sessionid='56782f23-2409-44dc-a603-215b3e24a164'" -v 4 14 | python sqlmap.py -g "inurl:"weibo.com/ .php id=" 15 | ``` 16 | 17 | -v: 18 | * 0:只显示python错误以及严重的信息。 19 | * 1:同时显示基本信息和警告信息。（默认） 20 | * 2:同时显示debug信息。 21 | * 3:同时显示注入的payload。 22 | * 4:同时显示HTTP请求。 23 | * 5:同时显示HTTP响应头。 24 | * 6:同时显示HTTP响应页面。 25 | -------------------------------------------------------------------------------- /key-point/react/hooks/README.md: -------------------------------------------------------------------------------- 1 | # React Hooks 2 | > Hooks API is a set of built-in functions that allow developers to use the state and lifecycle methods in the functional components. So, with hooks, functional components can handle UI, state, and logic of the component as well. 3 | 4 | ## 资源 5 | * [React Hooks explained in a few minutes - tutorial with examples](https://dev.to/duomly/react-hooks-explained-in-a-few-minutes-tutorial-with-examples-2bfp) 6 | * [Building a CRUD App with React Hooks & the Context API](https://alligator.io/react/crud-context-hooks/) 7 | * [React Hooks踩坑分享](https://mp.weixin.qq.com/s/w9XhwjF3F6oJBUdD1rp2BQ) 8 | * [使用 React Hooks 重构你的小程序](https://nervjs.github.io/taro/blog/2019-07-10-taro-hooks/) 9 | -------------------------------------------------------------------------------- /language/css/detail/rules/font/type/vertical-rhythm.md: -------------------------------------------------------------------------------- 1 | # 垂直的韵律 2 | ## 基线 3 | 传统意义上，基线是指大部分字母所“坐落”其上的一条看不见的线，称为基线。 4 | 5 | css中的line-height属性并没有严格意义上基线的概念，并且每个成行的文本都大致处于元素总行高的中间。这就意味着基于不同样式和字体的文本精确对齐（基线对齐）需要进一步手动，费时的调整和像素级的轻移。 6 | 7 | ## 垂直的韵律 8 | Vertical Rhythm可译成垂直的旋律。它的排版思路是垂直方向上各行文字的行高是一个基础数值的n倍，n是正整数。一般情况下，我们会把基础数值设置成基本行高。这样的限制可以让文字的布局变得更美观，且易于阅读。特别是对于有很多文字的页面，减少视觉疲劳很重要。 9 | 10 | ## 工具 11 | * baseliner.js是一个js库帮助你在页面上绘制固定间隔的横线 12 | * basehold.it 是一个类似hold.it的服务，可以提供用于绘制横线的css或背景图片 13 | * baseline.js是一个js库用于确保外部资源，例如图片的高度是基础数值的n倍。不过这个库还有不少bug 14 | * [Entry.css](一个可配置的、更适合阅读的中文文章样式库) 15 | 16 | ## 参考 17 | * [CSS基线之道](http://www.qianduan.net/css-baseline-road/) 18 | * [中文排版二三事](http://zencode.in/Entry.css/demo.html) -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | # Sass compass 30 | .sass-cache 31 | .map 32 | 33 | .DS_Store 34 | 35 | -------------------------------------------------------------------------------- /libs/underscore&lodash/README.md: -------------------------------------------------------------------------------- 1 | # Underscore 和 lodash 介绍 2 | ## 是个啥 3 | [lodash](http://lodash.com/)和[underscorejs](http://underscorejs.org/)都是js工具库。 4 | 5 | ## Underscore 和 lodash区别 6 | * lodash 比 underscorejs的性能好 7 | * lodash 能个性化构建：它能构建出underscorejs版（与underscorejs的api完全一致）,modern版，compat版，Legacy版，moblie版等 8 | * lodash增加了一些underscore没有的api，如_.cloneDeep 9 | 10 | 总而言之，推荐用 lodash 11 | 12 | ## 推荐阅读 13 | * [Lodash: 10 Javascript Utility Functions That You Should Probably Stop Rewriting](http://colintoh.com/blog/lodash-10-javascript-utility-functions-stop-rewriting) 14 | * [Lodash中十个常用的工具函数](http://wwsun.github.io/posts/lodash-top-10-functions.html) 15 | * [优雅的underscore](http://yalishizhude.github.io/2015/08/02/beatiful-underscore/) -------------------------------------------------------------------------------- /scene/wechat/miniprogram/content/bug.md: -------------------------------------------------------------------------------- 1 | # 常见问题 2 | ## 在CSS用背景图用本地路径，图片不显示 3 | 原因：在 CSS 中设置背景图不支持本地图片。 4 | 解决方案：用 base64 的或者网络路径。或者用 `image` 标签。 5 | 6 | ## IOS 中设置了背景色的图片不显示 7 | 解决方案：不要在 Image 上设置背景色。 8 | 9 | ## 小程序中嵌入 webview 的页面有哪些限制 10 | 1. 个人类型的小程序暂不支持使用 webview。 11 | 1. webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。 12 | 1. webview 支持的jssdk 是有限的，比如不支持微信支付。 13 | 14 | [webview 文档](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html) 15 | 16 | ## 小程序支持长按识别公众号二维码吗？ 17 | 官方宾没有说明，只说 "image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别"。 18 | 19 | 有网友说： 可以实现识别跳转到webview，但公众号不行(有些矛盾。。。) (19-07-30)。[相关链接](https://developers.weixin.qq.com/community/develop/doc/00004c532b06b09dd9e8917f359400?_at=1581596538151)。 -------------------------------------------------------------------------------- /scene/wechat/miniprogram/content/framework/app.md: -------------------------------------------------------------------------------- 1 | # App 2 | ## 注册 App 3 | 在 小程序 根路径的 `app.js` 下注册。 4 | ``` 5 | App({ 6 | onLaunch (options) { // 监听小程序初始化 7 | // Do something initial when launch. 8 | }, 9 | onShow (options) { // 监听小程序启动或切前台 10 | // Do something when show. 11 | }, 12 | onHide () { // 监听小程序切后台 13 | // Do something when hide. 14 | }, 15 | onError (msg) { 16 | console.log(msg) 17 | }, 18 | onPageNotFound() { // 页面不存在监听函数。 19 | wx.redirectTo({ // 页面找不到后，跳转到指定页面 20 | url: 'pages/...' 21 | }) // 如果是 tabbar 页面，请使用 wx.switchTab 22 | }, 23 | globalData: {} 24 | }) 25 | ``` 26 | 27 | ## 获取 App 28 | ``` 29 | var appInstance = getApp() 30 | console.log(appInstance.globalData) 31 | ``` -------------------------------------------------------------------------------- /focus-point/effective/ide/vscode-snippent/react.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "setState": { 4 | "prefix": "reactSetState", 5 | "body": [ 6 | "this.setState({", 7 | " $1: $2", 8 | "})" 9 | ], 10 | "description": "react set state" 11 | }, 12 | "setStateFn": { 13 | "prefix": "reactSetStateFn", 14 | "body": [ 15 | "this.setState((state) => {", 16 | " return {", 17 | " $1: $2", 18 | " }", 19 | "})" 20 | ], 21 | "description": "react set state" 22 | }, 23 | "setStateCB": { 24 | "prefix": "reactSetStateCB", 25 | "body": [ 26 | "this.setState({", 27 | " $1: $2", 28 | "},", 29 | "() => {", 30 | " ", 31 | "})" 32 | ], 33 | "description": "react set state callback" 34 | } 35 | } -------------------------------------------------------------------------------- /other/webRTC.md: -------------------------------------------------------------------------------- 1 | # webRTC 2 | WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。 3 | 4 | ## 教程 5 | * [Real time communication with WebRTC](https://codelabs.developers.google.com/codelabs/webrtc-web/#0) 6 | * [Getting Started with WebRTC](https://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-rtcdatachannel) 7 | * [WebRTC API(MDN)](https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API) 8 | 9 | ## Demo 10 | * [WebRTC samples](https://webrtc.github.io/samples/) 11 | 12 | ## 框架 13 | * [EasyRTC](https://github.com/priologic/easyrtc) 14 | * [SimpleWebRTC](https://github.com/andyet/SimpleWebRTC) 15 | -------------------------------------------------------------------------------- /language/js/grammar/loop/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 循环 Demo 7 | 8 | 9 | 10 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /language/sass/intro.md: -------------------------------------------------------------------------------- 1 | ## Sass 介绍 2 | CSS本身是非常有趣的，但随着样式表变大，变复杂，变得越来越难维护。这时候预处理就有用了。Sass能让你使用一些CSS中没有的特性，比如：变量，嵌套（nesting），混入（mixins），继承等其他能让写CSS变的继续有趣的特性。 3 | 4 | 当你开始编译Sass，它会将Sass编译并保存成普通的可以用在你网站里的CSS。 5 | 6 | > Sass是世界上最成熟，稳定强大的专业的CSS拓展语言。 7 | 8 | ## [Sass官网](http://sass-lang.com/)上对Sass的介绍 9 | ### 与CSS兼容 10 | Sass和所有版本的CSS完全兼容。我们非常认真的对待兼容性，因此你可以放心的使用可用的CSS库。 11 | 12 | ### 丰富的特性 13 | Sass可以自夸的说比其他CSS拓展语言有更多的特性和功能。Sass核心团队不停的努力工作，不仅为了保持进步还为保持领先。 14 | 15 | ### 成熟 16 | 热爱Sass的核心团队积极的为Sass提供支持已经超过8年了。 17 | 18 | ### 工业认可 19 | 一而再，再而三的，工业上把Sass作为CSS拓展语言的首选。 20 | 21 | ### 庞大的社区 22 | 许多技术公司和开发者活跃地为Sass提供支持和开发。 23 | 24 | ### 框架 25 | 非常多的框架是用Sass构建的。[Compass](http://compass-style.org/),[Bourbon](http://bourbon.io/),[Susy](http://susy.oddbird.net/)只是其中的一部分。 -------------------------------------------------------------------------------- /find-people/README.md: -------------------------------------------------------------------------------- 1 | # 找人 2 | 1. 目标 3 | 1. 评估标准 4 | 1. 如何评估 5 | 6 | ## 简书上优秀前端 7 | * [晚晴幽草](http://www.jianshu.com/u/9aae3d8f4c3d) 8 | * [WangChloe](http://www.jianshu.com/u/10fc79e42608) 做一个有记性有温度不掉发的程序媛。 9 | * [颜卿今天Coding了吗](http://www.jianshu.com/u/e343d00ee6f6) 10 | * [IT程序狮](http://www.jianshu.com/u/da75e2609fe6) 11 | * [Miss____Du](http://www.jianshu.com/u/81b9f97608ba) 12 | * [荷小音](http://www.jianshu.com/u/f82491f86116) 13 | * [小虫巨蟹](http://www.jianshu.com/u/7233332cb959) 14 | * [烈风裘](http://www.jianshu.com/u/41b4ebfd336d) 15 | * [Alkaidx](http://www.jianshu.com/u/9b19ff8e4a86) 16 | * [九彩拼盘](http://www.jianshu.com/u/EhUmA3) 17 | * [劳卜](http://www.jianshu.com/u/39ceb47e0daf) 18 | 19 | ## 工具网站 20 | * [Githuber.cn](http://githuber.cn/) 筛选 Github 上的人。 21 | -------------------------------------------------------------------------------- /engineering/module/CommonJS-demo/demo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 支持 CMD 规范的模块 3 | !(function(global, factory) { 4 | if (typeof module === 'object' && module.exports === 'object') { 5 | module.exports = factory(require('jQuery')); 6 | } else { 7 | var exports = factory(window.jQuery); 8 | for (var key in exports) { 9 | global[key] = exports[key]; 10 | } 11 | } 12 | })(window ? window : this, function($) { 13 | var defaultParams = { 14 | name: 'Joel', 15 | job: 'FE Develop' 16 | } 17 | var greetFn = function(params) { 18 | console.log('I\'m %s. My Job is %s!', (params && params.name) || defaultParams.name, (params && params.job) || defaultParams.job); 19 | }; 20 | return { 21 | greetFn: greetFn 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /language/js/BOM/README.md: -------------------------------------------------------------------------------- 1 | # [BOM](http://w3school.com.cn/jsref/index.asp) 2 | 浏览器提供的一些方法。 3 | 4 | ## 常用对象 5 | * navigator 有关浏览器的信息 6 | * userAgent 用户代理的信息 7 | * platform 运行浏览器的操作系统平台 8 | * history 浏览历史 9 | * lengh 10 | * back() 11 | * forward() 12 | * go(index) 13 | * location 当前 URL 的信息 14 | * href 15 | * hostname 16 | * host 17 | * port 18 | * protocol 19 | * search 20 | * hash 21 | * pathname 22 | * reload() 23 | * assign(url) 24 | * replace(url) 25 | * window 26 | * alert() 27 | * confirm() 28 | * prompt() 29 | * open() 30 | * setTimeout() 31 | * clearTimeout() 32 | * setInterval() 33 | * clearInterval() 34 | * requestAnimationFrame 35 | * console 36 | * log 37 | * info 38 | * warn 39 | * error -------------------------------------------------------------------------------- /engineering/code-quality/code-style/common.md: -------------------------------------------------------------------------------- 1 | # 通用规范 2 | ## 不要提交注释掉的代码 3 | 如 4 | ``` 5 | function foo(bar) { 6 | const baz = bar(false) 7 | // we no longer do this for some good reason 8 | // if (baz === 'foobar') { 9 | // return baz 10 | // } else { 11 | // return bar.foobar() 12 | // } 13 | return baz 14 | } 15 | ``` 16 | 17 | 我们提交这样的代码，可能是出于这代码以后可能会被用到的考虑。但有如下缺点 18 | * 这对协同者来说，会有很多这会造成疑惑 19 | * 让重要的代码变的不明显,如 20 | ``` 21 | // dozens 22 | // of 23 | // lines 24 | // of 25 | // commented 26 | // code 27 | someImportantCode() 28 | // dozens 29 | // of 30 | // more 31 | // lines 32 | // of 33 | // commented 34 | // code 35 | ``` 36 | 37 | 了解更多细节见[这里](https://medium.com/@kentcdodds/please-don-t-commit-commented-out-code-53d0b5b26d5f#.6t6ep47pq) 38 | 39 | -------------------------------------------------------------------------------- /language/js/transfer-data/web-stroge/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 页面1 6 | 7 | 8 | 用静态服务器打开才行。本页面修改 Storage 不会触发本页面的storage 事件。 9 | 22 | 23 | -------------------------------------------------------------------------------- /language/svg/overview/path.md: -------------------------------------------------------------------------------- 1 | # 路径 2 | ## 直线指令 3 | * `M` 移动 4 | * `L` 画线 5 | * `H` 画水平线 `H 20` 相对与 `L 20 当前y座标` 6 | * `V` 画垂直线 `V 20` 相对与 `V 当前x座标 20` 7 | * `Z` 闭合曲线 8 | 9 | 大写字母表示到后面值为绝对值，小写字母表示后面值为相对当前点的值 10 | 11 | ## 画直线 12 | 画一条起点是（10, 10）终点点是 (20, 30) 的线 13 | ``` 14 | 15 | ``` 16 | 17 | 在当前点的位置水平移动 10，垂直移动 10，再画一天到 (40, 50) 的线 18 | 19 | ``` 20 | 21 | 22 | ``` 23 | 24 | 画一个与下面代码等效的矩形 25 | ``` 26 | 27 | ``` 28 | 29 | ``` 30 | 31 | 32 | ``` 33 | 34 | ## 曲线指令 35 | * `C x1 y1, x2 y2, x y` 三次贝塞尔曲线 36 | * `Q x1 y1, x y` 二次贝塞尔曲线 37 | * `A rx ry x-axis-rotation large-arc-flag sweep-flag x y` 弧形 -------------------------------------------------------------------------------- /libs/vue/perfomance.md: -------------------------------------------------------------------------------- 1 | # 性能优化 2 | ## v-for 加 key 3 | 为每项提供一个唯一 `key`。来给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，从而增加效率。`key`值是每项都有唯一 id。 例如: 4 | ``` 5 |
6 | 7 |
8 | ``` 9 | 10 | ## 动态组件加 keep-alive 11 | 如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数。例如： 12 | ``` 13 | 14 | 15 | 16 | 17 | 18 | ``` 19 | 20 | 2.1.0 新增`include` 和 `exclude` 属性允许组件有条件地缓存组件。如 21 | ``` 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ``` 31 | -------------------------------------------------------------------------------- /language/css/detail/inheritance-and-cascade/ua-style.md: -------------------------------------------------------------------------------- 1 | # 浏览器默认样式 2 | 浏览器都拥有一套自己的默认样式。 3 | 浏览器之所以有默认样式表，是为了没有样式表的页面也能凑活着看。 4 | 不同浏览器；以及版本不同的浏览器的默认样式一般都是不同的。 5 | 6 | ## 重置样式表 7 | 为了保证页面在不同浏览器中显示的尽可能的一致，我们会重置不同浏览器默认的样式，称为重置样式表。 8 | 9 | 有很多别人整理的不错的重置样式表，例如[CSS Reset](http://meyerweb.com/eric/tools/css/reset/index.html) ， [strppd.css](http://iainspad.com/strppd-css)，[normalize.css](http://necolas.github.io/normalize.css/)。我比较喜欢和推荐的是[normalize.css](http://necolas.github.io/normalize.css/)。 10 | 11 | 12 | ## 一些资源 13 | * [IE的默认样式](http://www.iecss.com/) 14 | * [Firefox的默认样式](http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css) 15 | * [WebKit的默认样式](http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) 16 | * [浏览器默认样式对比表](http://developer.doyoe.com/default-style/) -------------------------------------------------------------------------------- /language/css/detail/rules/web-font.md: -------------------------------------------------------------------------------- 1 | # web-font 2 | 浏览器要渲染使用了 Web 字体的文本，就必须从互联网下载字体。由于网络的不确定性，如果下载字体花费的时间非常久，浏览器该如何处理？ 3 | 实际上，浏览器能使用的策略并不多，无外乎以下几种： 4 | * 先使用系统默认字体渲染文本；等 Web 字体下载完，使用新字体再渲染一次； 5 | * 等到 Web 字体下载完成，才渲染文本。也就是字体下载完全阻塞对应文本渲染 6 | * 先跳过文本的渲染；一段时间后，如果 Web 字体仍未下载完，使用系统默认字体渲染文本；等字体下载完，再次渲染； 7 | 8 | 方案 1 的好处是用户可以第一时间看到文本内容，坏处是：两种字体之间的差异，一定会造成内容抖动。早期的 Firefox 以及现阶段所有 IE 都是采用的这种方案。 9 | 10 | 方案 2 的好处是完全避免了内容抖动，坏处也很明显：字体下载需要多久，用户就有多久完全看不到文本内容。现阶段基于 Webkit 内核的浏览器，如 Chrome 和 Safari 都是如此。 11 | 12 | 方案 3 则是一个折中方案，如果 Web 字体能在一段时间内加载完，不会有因为字体变换带来的抖动；同时如果加载字体需要很久，也不至于不显示文本。现阶段 Firefox 采用的这种方案。Firefox 默认等 3 秒，可以找到 about:config 中的 gfx.downloadable_fonts.fallback_delay 配置来修改。 13 | 14 | 转自 https://www.imququ.com/post/chrome_and_web_fonts.html 15 | 16 | ps：谷歌字体被墙，解决方案是，用360提供的[cdn](http://libs.useso.com/) -------------------------------------------------------------------------------- /find-people/review-question.md: -------------------------------------------------------------------------------- 1 | # 前端面试题 2 | 笔试： 45分钟 3 | 4 | HTML 5 | * 列举 5 个 HTML5 新增的标签，并介绍语义。 6 | 7 | CSS 8 | * 绝对定位元素找定位元素的规则是怎样的？ 9 | * 实现元素在父元素中水平，垂直居中。列举至少 2 种方式。 10 | * 实现让元素的宽，高总是等于屏幕宽度的一半。列举至少 2 种方式。 11 | 12 | JavaScipt 13 | * 去除数组 arr(格式形如：[{id: 1}, {id: 2},...]) 中 id 重复的元素。 14 | * 把数组 arr(格式形如：[{age: 52}, {age: 34},...]) 的内容， 按照 age 字段的值，从小到大排序。 15 | * 对象的浅拷贝和深拷贝有什么区别？实现对象的深拷贝。 16 | 17 | 框架 18 | * 结合你熟悉的框架，介绍 父组件和子组件如何通信， 兄弟组件如何通信。 19 | * 对单向数据流的理解，解决什么问题，什么时候用？ 20 | * 你了解哪些框架，介绍你最熟悉的框架有哪些优缺点。 21 | 22 | 其他 23 | * 你觉得怎样的代码是好代码？ 24 | * 如何选第三方组件？ 25 | 26 | **** 27 | 28 | 面试 29 | * 你住哪，过来还方便吗？ 30 | * 介绍一个你做过的项目；你的职责，最后取得怎样的成绩？你们的工作流程是怎样的 31 | * 有无管理团队的经验； 如何分配任务的，如何保证项目正常上线。 32 | * 遇到问题的解决思路。 33 | * 你理想的团队是怎样的。 34 | * 最近读过的书。 35 | * 前端的信息来源。博客，视频等。 36 | * 离职原因 37 | * 职业规划。 38 | * 你什么要问我的吗？ 39 | -------------------------------------------------------------------------------- /language/html/tag-and-attr/demo/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 列表demo 6 | 7 | 8 |

无序列表

9 |

苏州旅游景点

10 |
    11 |
  • 拙政园
    • 12 |
  • 灵岩山
    • 13 |
  • 山塘街
    • 14 |
15 | 16 |

文章列表

17 |
    18 |
  • 成为前端大牛之路
    • 19 |
  • 我的学习前端的经验分析
    • 20 |
  • 前端工程化
    • 21 |
  • 前后端分离要点笔记
    • 22 |
23 | 24 |

有序列表

25 |

做番茄炒蛋的步骤

26 |
    27 |
  1. 洗番茄，切片
    2. 28 |
  2. 打蛋
    3. 29 |
  3. 炒番茄
    4. 30 |
  4. 加入蛋一起炒
    5. 31 |
  5. 加盐
    6. 32 |
  6. 起锅
    7. 33 |
34 | 35 |

热歌榜Top 3

36 |
    37 |
  1. 歌曲1
    2. 38 |
  2. 歌曲2
    3. 39 |
  3. 歌曲3
    4. 40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /language/js/grammar/loop/README.md: -------------------------------------------------------------------------------- 1 | # 循环 2 | 在 JavaScript 中循环主要是 while 和 for。 3 | 4 | ## while 5 | ``` 6 | while(条件){ 7 | //语句 8 | } 9 | ``` 10 | 11 | 如 12 | ``` 13 | var i = 0; 14 | while(i < 5){ 15 | console.log(i); 16 | i += 1; 17 | } 18 | ``` 19 | 20 | ## for 21 | ``` 22 | for(初始值;条件;每次循环执行后执行){ 23 | //语句 24 | } 25 | ``` 26 | 27 | 如 28 | ``` 29 | for (var i = 0; i < 5; i++) { 30 | console.log(i); 31 | } 32 | ``` 33 | 34 | ## continue 35 | 结束本次循环，进入下一次循环。只能在 for 或 while 中使用。 36 | 37 | 如 38 | ``` 39 | for(var i = 0; i < 8; i++){ 40 | if(i % 3 == 0){ 41 | continue; 42 | } 43 | console.log(i); 44 | } 45 | ``` 46 | 47 | ## break 48 | 在 for 或 while 中使用，表示结束循环。 49 | ``` 50 | for(var i = 1; i < 8; i++){ 51 | if(i % 3 == 0){ 52 | break; 53 | } 54 | console.log(i); 55 | } 56 | ``` 57 | -------------------------------------------------------------------------------- /language/js/grammar/types/object/defineProperty.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /software/terminal/caniuse-command.md: -------------------------------------------------------------------------------- 1 | # CanIUse命令行工具介绍 2 | 前端开发者应该都知道 [CanIUse](http://caniuse.com/)。无意间发现有[好心人](https://github.com/sgentle)做了命令行工具。 3 | 4 | ## 安装 5 | ``` 6 | npm install -g caniuse-cmd 7 | ``` 8 | 注意：如果使用的是Windows系统，需要在Git的命令行执行上述命令。否则会报`Git Not Found`的错。 9 | 10 | ## 用法 11 | ### 最基本的用法 12 | ``` 13 | caniuse 特性 14 | ``` 15 | 16 | 如运行 `caniuse websocket`，结果如下 17 | 18 | ![caniuse websocket 运行结果](http://upload-images.jianshu.io/upload_images/16777-86835af7efda1a5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 19 | 20 | ### 查看选项/帮助 21 | ``` 22 | caniuse --help 23 | ``` 24 | 25 | ### 常用选项 26 | * `-m` 显示手机浏览器的兼容情况，默认只显示PC浏览器的兼容情况 27 | * `-p` 显示浏览器市场份额 28 | * `-w` 打开浏览器，在 [CanIUse](http://caniuse.com/)上搜索结果 29 | * `-c` 只显示最新浏览器的兼容情况 30 | 31 | 更多说明见[这里](https://www.npmjs.com/package/caniuse-cmd)。 -------------------------------------------------------------------------------- /language/js/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript 2 | ## 目录 3 | * [介绍](intro) 4 | * [语法](grammar) 5 | * [DOM](DOM) 6 | * [BOM](BOM) 7 | * [Canvas](canvas) 8 | * [与服务端交互](interact-with-server) 9 | * [http](interact-with-server/http) 10 | * [ajax](interact-with-server/ajax) 11 | * [fetch-api](interact-with-server/fetch-api) 12 | * [cookie](interact-with-server/cookie.md) 13 | * [同域的页面间传递数据](transfer-data) 14 | * [ES6](ES6) 15 | * [ES7](ES7) 16 | * [函数式编程](function-programming) 17 | * [Node.js](nodejs) 18 | 19 | ## 教程 20 | * [JavaScript 标准参考教程（alpha）-阮一峰](http://javascript.ruanyifeng.com/) 21 | * [JavaScript简易教程 - 颜海镜](http://yanhaijing.com/basejs/) 我所知道最完整最简洁的JavaScript基础教程 22 | * [MDN JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) 23 | * [跟着9张思维导图学习Javascript](http://www.cnblogs.com/coco1s/p/3953653.html) 24 | -------------------------------------------------------------------------------- /language/js/grammar/handle-error/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 错误处理demo 6 | 7 | 8 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /language/svg/demo/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | hello world 7 | 8 | 9 | 10 |

hello world

11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /resource/bookmark/mail-subscribe.md: -------------------------------------------------------------------------------- 1 | 中文的 2 | * [前端乱炖](http://www.html-js.com/static/htmljs-weekly-5.html) 3 | * [前端周刊](http://www.feweekly.com/) 4 | * [奇舞周刊](http://www.75team.com/weekly/) 5 | * [InfoQ中国](http://www.infoq.com/cn/reginit.action) 6 | * [码农周刊](http://weekly.manong.io/) 7 | * [segmentfault](http://segmentfault.com/user/settings?tab=notify) 8 | 9 | 英文的 10 | * [CSS Weekly](http://css-weekly.com/) 11 | * [HTML5 Weekly](http://html5weekly.com/) 12 | * [JavaScript Weekly](http://javascriptweekly.com/) 13 | * [Nodejs Weekly](http://nodeweekly.com/) 14 | * [Responsive Design Weekly](http://responsivedesignweekly.com/) 15 | * [Sidebar.io](http://sidebar.io/) 16 | * [Web Design Weekly](http://web-design-weekly.com/) 17 | * [Web Tools weekly](http://webtoolsweekly.com/) 18 | * [hackernewsletter](http://www.hackernewsletter.com/) -------------------------------------------------------------------------------- /software/weinre.md: -------------------------------------------------------------------------------- 1 | # 远程调试手机页面工具：Weinre介绍 2 | [Weinre(全称Web Inspector Remote)](https://people.apache.org/~pmuellr/weinre/docs/latest/)是一款的可以在电脑上远程调试手机页面的工具。 3 | 4 | 通过Weinre，我们可以在电脑上审查手机上页面的元素，选中的元素会有一个选中效果，并显示对应元素的样式。如下图所示： 5 | 6 | ![weinre-demo.jpg](http://upload-images.jianshu.io/upload_images/16777-af3c201081063a28.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240) 7 | 8 | 当在电脑上改变元素的样式时，手机上对应的元素的样式也会立即改变（无需刷新页面）。 9 | 10 | 除了审查元素的功能之外，如果在电脑上管理页面的Console选项卡执行JS代码，该JS代码会立即在手机上执行。 11 | 12 | Weinre目前应该不支持在JS中打断点调试的功能。 13 | 14 | 如何安装和使用，可以见[Weinre入门手册](https://github.com/nupthale/weinre)。 15 | 16 | 需要注意的是 17 | * 在Windows上安装Weinre时，cmd窗口需要用管理员身份打开。如果用npm安装Weinre失败，可以用cnpm来安装。 18 | * 用`weinre`启动Weinre Server时，只有本机才能连接Weinre Server。如果需要手机可以连接Weinre Server，需要用 `weinre --boundHost -all-`或用`weinre --boundHost 手机IP`来启动Weinre Server。 19 | -------------------------------------------------------------------------------- /language/js/grammar/closure/README.md: -------------------------------------------------------------------------------- 1 | # 闭包 2 | 闭包简单理解成定义在一个函数内部的函数。如 3 | ``` 4 | function add(initVal){ 5 | return function(value){ 6 | return initVal + value; 7 | } 8 | } 9 | 10 | add(1)(2);// 3 11 | add(2)(3);// 5 12 | ``` 13 | 14 | JavaScript有两种作用域：全局作用域和函数作用域。函数内部可以直接读取全局变量。但是，在函数外部无法读取函数内部声明的变量。闭包最大的特点，就是它可以“记住”诞生的环境。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。 15 | 16 | 闭包的最大用处有两个，一个是可以读取函数内部的变量(模拟私有变量)，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。 17 | 18 | 注意，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。因此不能滥用闭包，否则会造成网页的性能问题。 19 | 20 | ## 拓展阅读 21 | * [javascript闭包机制](http://www.ifcoder.us/600) 22 | * [Master the JavaScript Interview: What is a Closure?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36) 23 | * [closures are not magic](http://renderedtext.com/blog/2015/11/18/closures-are-not-magic) 24 | -------------------------------------------------------------------------------- /software/browser/shortcut.md: -------------------------------------------------------------------------------- 1 | # 浏览器快捷键 2 | * 常用操作 3 | * Ctrl + F:在网页中查找内容 4 | * F3:下一个 5 | * Shift + F3:上一个 6 | * Ctrl + L：使地址栏获得焦点 7 | * Ctrl + K：使地址栏旁的搜索栏获得焦点 8 | * Ctrl + Enter： 自动补全当前地址，并进入 9 | * Ctrl + D: 将当前页面保存到书签 10 | * Ctrl + H: 历史 11 | * Ctrl + J : 打开下载内容 12 | * Ctrl + Shift+ P:隐私浏览模式（在隱私瀏覽視窗中，Firefox 不會保留任何瀏覽記錄、搜尋記錄、下載記錄、網頁表單輸入內容、Cookie、暫存檔案） 13 | * 缩放页面 14 | * Ctrl + +:放大 15 | * Ctrl + -:缩小 16 | * Ctrl + 0:默认大小 17 | * 标签页操作 18 | * Ctrl + Shift+ Tab： 激活左边一个标签页 19 | * Ctrl + Tab ： 激活右边一个标签页 20 | * Ctrl + [0-8] : 到某个标签 21 | * Ctrl + 9 ： 选择最后标签页 22 | * Ctrl + T: 新建Tab 23 | * Ctrl+ shift + T ：打开最近关闭的一个tab 24 | * Ctrl + w : 关闭当前tab 25 | * Ctrl + Shift + A：打开附加组件 26 | * 网址搜索（在地址栏中输入） 27 | * * + 空格 + 关键字：搜索满足条件的收藏的网站 28 | * ^ + 空格 + 关键字：搜索满足条件的浏览历史 29 | * % + 空格 + 关键字：搜索满足条件的打开的标签 30 | 31 | 32 | -------------------------------------------------------------------------------- /engineering/code-quality/name/css-classname.md: -------------------------------------------------------------------------------- 1 | # CSS 类名命名汇总 2 | ## 状态 3 | * collapsed 收拢的 4 | * expanded 展开的 5 | * current 当前 6 | * selected 选中的 7 | * active 活跃的 8 | * enabled 可用 9 | * disabled 不可用 10 | 11 | ## 布局 12 | * 头部 header 13 | * 尾部 footer 14 | * 主栏 main 15 | * 侧栏 side 16 | * 盒容器 wrap 17 | * 条目 item。一般和模块名一起用，如 `list-item`， `news-item`。 18 | 19 | ## 模块 20 | * 导航 nav 21 | * 子导航 subnav 22 | * 面包屑 crumb 23 | * 菜单 menu 24 | * 选项卡 tab 25 | * 标题 head/title 26 | * 列表 list 27 | * 内容 content 28 | * 表格 table 29 | * 表单 form 30 | * 热点 hot 31 | * 排行 top 32 | * 登录 login 33 | * 标志 log 34 | * 搜索 search 35 | * 幻灯 slide 36 | * 提示 tip 37 | * 帮助 help 38 | * 新闻 news 39 | * 下载 download 40 | * 注册 regist 41 | * 投票 vote 42 | * 版权 copyright 43 | * 结果 result 44 | * 按钮 button 45 | * 输入 input 46 | * 个人中心 47 | * 用户状态（关注数，喜欢数） user-status 48 | * 用户头像 avatar 49 | * 徽章 badge -------------------------------------------------------------------------------- /focus-point/effective/ide/vscode-snippent/css.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "display flex": { 3 | "prefix": "ly", 4 | "body": [ 5 | "display: flex;", 6 | ], 7 | "description": "display flex" 8 | }, 9 | "flex row center": { 10 | "prefix": "ly-c", 11 | "body": [ 12 | "justify-content: center;", 13 | ], 14 | "description": "flex row center" 15 | }, 16 | "flex row justify": { 17 | "prefix": "ly-j", 18 | "body": [ 19 | "justify-content: space-between;", 20 | ], 21 | "description": "flex row justify" 22 | }, 23 | "flex column center": { 24 | "prefix": "ly-m", 25 | "body": [ 26 | "align-items: center;", 27 | ], 28 | "description": "flex column center" 29 | }, 30 | "flex row multi": { 31 | "prefix": "ly-multi", 32 | "body": [ 33 | "flex-wrap: wrap;", 34 | ], 35 | "description": "flex row multi" 36 | }, 37 | } -------------------------------------------------------------------------------- /language/js/interact-with-server/cookie.md: -------------------------------------------------------------------------------- 1 | # cookie 2 | > cookie是存储在客户端的一小段数据，客户端通过HTTP协议和服务器端进行Cookie交互 3 | 4 | ## 出现cookie的原因 5 | HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。即用户A购买了一件商品放入购物车内，当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了。要跟踪该会话，必须引入一种机制。 6 | 7 | Cookie就是这样的一种机制。用Cookie可以来跟踪会话。 8 | 9 | ## cookie包含的属性 10 | * name 11 | * value 12 | * domian 13 | * path 14 | * expires 15 | * secure 16 | * http-only 17 | 18 | ## 属性详解 19 | ### name 和 value 20 | cookie的名称和值 21 | 22 | ### domain 23 | 24 | ### path 25 | 26 | ### http only 27 | 在页面里不能通过JS来读写 28 | 29 | ### security 30 | 设置为true时，只在HTTPS连接下才会发送 31 | 32 | ## cookie的发送 33 | 如果请求的url满足domain,path,http only,security的限制时，请求头中会包含cookie。 34 | 35 | 36 | ## 其他注意点 37 | 1. 浏览器cookie存储大小的限制 38 | 1. 客户端向服务器端发异步请求，如果服务器端在响应时设置cookie,那cookie要刷新页面后才会生效。如果用js来设置cookie，则即时生效的。 -------------------------------------------------------------------------------- /engineering/build-tool/browserify.md: -------------------------------------------------------------------------------- 1 | # browserify 2 | ## 安装 3 | 1. 安装 `nodejs` 4 | 1. 安装browserify `npm install -g browserify` 5 | 6 | ## hello world 7 | ### 1.初始化项目 8 | 1. 新建一个文件夹 9 | 1. 打开命令行(终端),cd到刚新建的文件夹 10 | 1. 输入 `npm init` 11 | 12 | ### 2.创建源文件 13 | 创建一个名为 `main.js`的文件，内容如下 14 | ``` 15 | var unique = require('uniq'); 16 | var data = [1, 2, 2, 3, 4, 5, 5, 5, 6]; 17 | console.log(unique(data)); 18 | ``` 19 | 20 | ### 3.安装依赖 21 | 在命令行输入`npm install --save uniq` 22 | 23 | ### 4.生成文件 24 | 在命令行输入`browserify m ain.js -o bundle.js` 25 | 26 | ### 5.引用生成文件 27 | 1. 新建一个html文件 28 | 1. 在文件中引用`bundle.js`即可 29 | 30 | 31 | ## 自动化构建 32 | 可参考 https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md 33 | 34 | ## 资源 35 | * [官网](http://browserify.org/) 36 | * [browserify handbook](https://github.com/substack/browserify-handbook) 37 | -------------------------------------------------------------------------------- /language/js/grammar/function/README.md: -------------------------------------------------------------------------------- 1 | # 函数 2 | 函数就是一段可以反复调用的代码块。函数还能接受输入的参数，不同的参数会返回不同的值。 3 | 4 | ## 函数定义/声明 5 | ``` 6 | function 函数名(参数1, 参数2, ...){ 7 | 8 | } 9 | ``` 10 | 11 | 如 12 | ``` 13 | function add(a, b){ 14 | return a + b; 15 | } 16 | 17 | ## 函数表达式 18 | 将函数赋给一个变量，叫做函数表达式。如 19 | ``` 20 | var addFn = function(a, b){ 21 | return a + b; 22 | } 23 | ``` 24 | 25 | ## 调用函数 26 | ``` 27 | 函数名(参数1, 参数2, ...); 28 | ``` 29 | 30 | ## 函数的返回值 31 | `return 表达式;` 为函数的返回值。如果写 return。 函数的返回值为 undefined。注意在函数中 `return 表达式;`，后面的语句不会被执行。 32 | 33 | ## arguments对象 34 | arguments对象包含了函数运行时的所有参数，arguments[0]就是第一个参数，arguments[1]就是第二个参数，以此类推。这个对象只有在函数体内部，才可以使用。如： 35 | ``` 36 | var f = function(one) { 37 | console.log(arguments[0]); 38 | console.log(arguments[1]); 39 | console.log(arguments[2]); 40 | } 41 | 42 | f(1, 2, 3) 43 | // 1 44 | // 2 45 | // 3 46 | ``` 47 | -------------------------------------------------------------------------------- /scene/wechat/miniprogram/README.md: -------------------------------------------------------------------------------- 1 | # 小程序 2 | ## 目录 3 | * 官方文档 4 | * [开发者文档](https://developers.weixin.qq.com/miniprogram/dev/index.html?t=19031317) 5 | * [微信小程序设计指南](https://developers.weixin.qq.com/miniprogram/design/index.html) 6 | * 框架 7 | * [小程序配置](content/framework/config.md) 8 | * [App](content/framework/app.md) 9 | * [页面](content/framework/page.md) [生命周期](content/framework/life-cycle.md) 10 | * [事件](content/framework/event.md) 11 | * [自定义组件](content/framework/component.md) 12 | * [语法](content/framework/grammar.md) 13 | * [场景码值](content/framework/scene-list.md) 14 | * [API](content/api.md) 15 | * 组件 16 | * [授权](content/authorize.md) 17 | * 兼容处理 18 | * 更新机制 19 | * 插件 20 | * [常见问题](content/bug.md) 21 | * 审核 22 | * [小程序评测常见问题](http://kf.qq.com/faq/190108BJnmUN190108RrEnqE.html) 小程序评测综合评定为达标，则开发者能享受极速审核：提交小程序审核将在2小时内审核完毕。工作时间：周一到周五，9点-21点；周六周日，9点-19点。 -------------------------------------------------------------------------------- /resource/bookmark/podcast.md: -------------------------------------------------------------------------------- 1 | ## 技术类 2 | * [Teahour](http://teahour.fm/) 面向程序员社区的专业访谈类播客。几个主要的主持人是牛掰的ruby on rails的程序猿。 3 | * [JSNext.fm](http://jsnext.fm/) 前端技术中文播客节目。 4 | * [FiveJs](https://fivejs.codeschool.com/) JS 社区的最新的新闻。 5 | * ~~[IT 公论](http://www.itgonglun.com/)「IT 公论」是由李如一、李楠和 Rio 创办的科技类播客 (podcast) 节目~~ 已停播 6 | * [内核恐慌](https://kernelpanic.fm/) ~~由 IPN 出品、吴涛和 Rio 做的播客。~~ 已脱离IPN。号称硬核，可也没什么干货。想听的人听，不想听的人就别听。 7 | * [代码时间](http://codetimecn.com/) 代码时间是@肖曦主播的一个面向程序员的中文播客节目, 致力于通过语音的方式传播程序员的正能量。 8 | * [IT 乱谈](http://itluantan.com/) 聊一聊IT人的生活与故事。 9 | * [APT](http://atp.fm/) 国外的科技类播客。由 [Marco Arment](http://www.marco.org/), [Casey Liss](http://www.caseyliss.com/) 和 [John Siracusa](http://hypercritical.co/)主持。 10 | 11 | ## 创业类 12 | * [蛋解创业](http://www.lizhi.fm/#/206682) 13 | 14 | ## 英文类 15 | * [RoundTable](http://english.cri.cn/4926/more/11680/more11680.htm) 很不错的英文新闻节目 16 | -------------------------------------------------------------------------------- /engineering/code-quality/name/BEM/overview.md: -------------------------------------------------------------------------------- 1 | # BEM 写法示例 2 | BEM 是一种前端项目开发的方法学， 主要解决样式的冲突的问题，以此帮助你在前端开发中实现可复用的组件和代码共享。更详细的介绍见[这里](http://www.jianshu.com/p/49023c3f242c)。 3 | 4 | 写法示例如下 5 | ``` 6 | 7 |
    8 |
  • Menu Item 1
    • 9 |
  • Menu Item 2
    • 10 |
  • Menu Item 3
    • 11 |
12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 |
25 | 26 |
27 | ``` -------------------------------------------------------------------------------- /language/css/tool/best-practice/BEM/overview.md: -------------------------------------------------------------------------------- 1 | # BEM 写法示例 2 | BEM 是一种前端项目开发的方法学， 主要解决样式的冲突的问题，以此帮助你在前端开发中实现可复用的组件和代码共享。更详细的介绍见[这里](http://www.jianshu.com/p/49023c3f242c)。 3 | 4 | 写法示例如下 5 | ``` 6 | 7 |
    8 |
  • Menu Item 1
    • 9 |
  • Menu Item 2
    • 10 |
  • Menu Item 3
    • 11 |
12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 |
25 | 26 |
27 | ``` -------------------------------------------------------------------------------- /focus-point/security/XSS/payload.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | payload 7 | 8 | 9 | 10 | 11 | XSS 12 | 13 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /language/js/DOM/dom-content-loaded-vs-load.md: -------------------------------------------------------------------------------- 1 | # 事件DOMContentLoaded和load的区别 2 | 他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。 3 | 4 | DOM文档加载的步骤为 5 | 6 | 1. 解析HTML结构。 7 | 1. 加载外部脚本和样式表文件。 8 | 1. 解析并执行脚本代码。 9 | 1. DOM树构建完成。//DOMContentLoaded 10 | 1. 加载图片等外部文件。 11 | 1. 页面加载完毕。//load 12 | 13 | 在第4步，会触发`DOMContentLoaded`事件。在第6步，触发`load`事件。 14 | 用原生js可以这么写 15 | ``` 16 | // 不兼容老的浏览器，兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253)，或用jQuery 17 | document.addEventListener("DOMContentLoaded", function() { 18 | // ...代码... 19 | }, false); 20 | 21 | window.addEventListener("load", function() { 22 | // ...代码... 23 | }, false); 24 | ``` 25 | 26 | 用jQuery这么写 27 | ``` 28 | // DOMContentLoaded 29 | $(document).ready(function() { 30 | // ...代码... 31 | }); 32 | 33 | //load 34 | $(document).load(function() { 35 | // ...代码... 36 | }); 37 | 38 | ``` 39 | 40 | 41 | -------------------------------------------------------------------------------- /libs/jQuery/README.md: -------------------------------------------------------------------------------- 1 | # [jQuery](http://jquery.com/) 2 | ## 目录 3 | * [jQuery 介绍](about.md) 4 | * [jQuery 写法示例](overview.md) 5 | * jQuery 核心 6 | - [选取元素](select-elem.md) 7 | - [遍历元素](iterator.md) 8 | - [获取或设置元素信息](get-or-set-elem-info.md) 9 | * [事件](event.md) 10 | * [动画](animate.md) 11 | * [ajax](ajax.md) 12 | * [Deferred](deferred.md) 13 | * [工具方法](utilities.md) 14 | * 插件 15 | * 最佳实践 16 | - [选择器的优化](performance/optimize-selectors.md) 17 | * [jQuery 常见问题](question.md) [答案](answer.md) 18 | 19 | ## 资源 20 | ### API 21 | * [官方API文档](http://api.jquery.com/) 22 | * [jQuery API 速查](https://oscarotero.com/jquery/) 23 | 24 | ### 学习资源 25 | * [官方学习中心](http://learn.jquery.com/) 26 | * [jQuery官方推出的教学视频-翻译](http://blog.jobbole.com/37699/) 27 | 28 | ### 其他 29 | * [You Might Not Need jQuery](https://github.com/HubSpot/YouMightNotNeedjQuery) 高级浏览器中的JS API来实现jQuery的一些API 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /focus-point/security/term.md: -------------------------------------------------------------------------------- 1 | # 术语 2 | ## 0day 3 | 是已经被发现(有可能未被公开),而官方还没有相关补丁的漏洞 4 | 5 | ## 肉鸡 6 | 是指可以被黑客远程控制的机器。 7 | 8 | ## 僵尸网络 9 | 僵尸网络 Botnet 是指采用一种或多种传播手段，将大量主机感染bot程序（僵尸程序）病毒，从而在控制者和被感染主机之间所形成的一个可一对多控制的网络。 攻击者通过各种途径传播僵尸程序感染互联网上的大量主机，而被感染的主机将通过一个控制信道接收攻击者的指令，组成一个僵尸网络。之所以用僵尸网络这个名字，是为了更形象地让人们认识到这类危害的特点：众多的计算机在不知不觉中如同中国古老传说中的僵尸群一样被人驱赶和指挥着，成为被人利用的一种工具。 10 | 11 | ## DDoS（Distributed Denial of Service，分布式拒绝服务） 12 | 透过大量合法或伪造的请求占用大量网络以及器材资源，以达到瘫痪网络以及系统的目的。 13 | 14 | ## payload 15 | 完成各种功能的恶意脚本。 16 | 17 | ## 蜜罐与蜜网（Honeypots and Honeynets） 18 | 蜜罐是一种软件应用系统，用来称当入侵诱饵，引诱黑客前来攻击。攻击者入侵后，通过监测与分析，就可以知道他是如何入侵的，随时了解针对组织服务器发动的最新的攻击和漏洞。还可以通过窃听黑客之间的联系，收集黑客所用的种种工具，并且掌握他们的社交网络。 设置蜜罐并不复杂，只要在外部因特网上有一台计算机运行没有打上补丁的微软Windows或者Red Hat Linux即行，然后在计算机和因特网连接之间安置一套网络监控系统，以便悄悄记录下进出计算机的所有流量。然后只要坐下来，等待攻击者自投罗网。 19 | 20 | 当多个蜜罐被网络连接在一起时模拟一个大型网络，并利用其中一部分主机吸引黑客入侵，通过监测、观察入侵过程，一方面调查入侵者的来源，另一方面考察用于防护的安全措施是否有效。这种由多个蜜罐组成的模拟网络就称为蜜网。 -------------------------------------------------------------------------------- /focus-point/effective/ide/README.md: -------------------------------------------------------------------------------- 1 | # 熟练使用IDE 之 VSCode和Sublime 2 | 熟练使用IDE包括： 3 | * 查找。通过字符串或正则查找内容。通过字符串查找方法名，变量名等。 4 | * 查看。主要是在不同的地方查看：如文件夹，浏览器。 5 | * 编辑。包括代码的重构，多块相同的同时编辑。 6 | * 新增。主要是代码模板和代码片段的生成。 7 | * 其他：代码高亮。 8 | 9 | ## 查找 10 | ### 快速打开文件 11 | Sublime和VSCode 都是： `cmd + p`。 12 | 13 | ### 在指定文件夹中查看 14 | Sublime： 插件 Sidebar Enchanme 中支持。 Reveal in Finder。 15 | 16 | VSCode： 打开命令面板：`cmd + shift + p`，输入 `File:reveal in Finder`。 17 | 18 | ### 在 Side Bar 中定位打开的文件 19 | Sublime： 插件 Sidebar Enchanme 中支持。 Reveal in Side Bar。 20 | 21 | VSCode： 自动能定位。 22 | 23 | ### 显示控制台 24 | Sublime: cmd + \~。 25 | 26 | VSCode: cmd + shift + y。 在头部也有 Terminal 打开的入口。 27 | 28 | ### 按方法名搜索 29 | Sublime: `cmd + r` 30 | 31 | VSCode: `cmd + shift + o` 32 | 33 | ## 新增 34 | ### 代码片段 35 | VSCode: Code > Preferences > User Snippents 36 | 37 | ## 查看 38 | ### 一个项目多个文件夹 39 | Sublime 直接脱文件夹就行。 40 | 41 | VSCode 用 Workspace 来做。 -------------------------------------------------------------------------------- /engineering/package-manage/yarn/README.md: -------------------------------------------------------------------------------- 1 | # Yarn 2 | [Yarn](https://yarnpkg.com/) 是 Facebook 开发的包管理器。 3 | 4 | 在使用 Yarn 时，开发者们还像以前一样从 npm 仓库那里获取资源，但安装速度更快，不同的机器的安装结果完全一致，甚至还可以在安全的离线环境中使用。 5 | 6 | ## npm 的一些缺点 7 | npm 客户端在把依赖安装到 node_modules 目录时存在不确定性。这种 “不确定性” 是指，由于安装依赖的顺序不同，你得到的 node_modules 目录的内部结构可能跟别人不一样。这种差异可能会导致 “我电脑上是好的” 之类的 bug，而这类 bug 往往是极难定位的。 8 | 9 | ## 与 npm 比较的优势 10 | * 速度比 npm 快 11 | * 通过引入 lockfile（锁定文件），解决 node_modules 的不确定性问题 12 | * 兼容 npm 和 Bower 工作流，支持混用多种仓库类型 13 | 14 | ## 常用命令 15 | * `yarn instll` 依据 package.json 来安装依赖 16 | * `yarn add packageName [--dev]` 17 | * `yarn remove packageName` 18 | 19 | ## 安装 20 | 见[这里](https://yarnpkg.com/en/docs/install)。 21 | 22 | ## 用法 23 | 见[这里](https://yarnpkg.com/en/docs/usage)。 24 | 25 | ## 参考链接 26 | * [[译] Yarn 官方介绍: 一款新的 JavaScript 包管理器](https://mp.weixin.qq.com/s?__biz=MzIyMjE0ODQ0OQ==&mid=2651552736&idx=1&sn=c8eca80f887ab10c81a351bcbbb12382) -------------------------------------------------------------------------------- /language/css/detail/responsive/README.md: -------------------------------------------------------------------------------- 1 | # 响应式布局 2 | 对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计） 3 | 4 | ## 响应式方法 5 | 由大屏变成小屏 6 | * 内容的挤压（宽度用百分比） 7 | * 占一整行换行 8 | * 隐藏某些元素 9 | 10 | ## 常见设备的CSS宽度 11 | 主要设置的断点 12 | * 480 普通手机 13 | * 768 ipad 14 | * 1024 普通的平板 15 | * 以上 PC 16 | 17 | ![常见设备的CSS宽度](device-css-width.png) 18 | 19 | ## 对于常见特定设备的媒体查询 20 | 见[这里](media-queries-for-common-device.css) 21 | 22 | ## 屏幕宽度断点 23 | * JS中的屏幕宽度断点（在某个宽度下执行某个内容） 24 | * [Importing CSS Breakpoints Into Javascript](https://www.lullabot.com/blog/article/importing-css-breakpoints-javascript) 25 | * [enquire.js](http://wicky.nillia.ms/enquire.js/) 插件 26 | 27 | ## 拓展阅读 28 | * [响应式网页设计的9项基本原则](http://www.shejidaren.com/principles-of-responsive-web-design.html) 29 | * [responsivedesign的STRATEGY](http://responsivedesign.is/strategy) 30 | * [Responsive Patterns](http://codepen.io/bradfrost/full/Iardn) 31 | 32 | -------------------------------------------------------------------------------- /focus-point/effective/ide/vscode-snippent/js.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "event-stopPropagation": { 3 | "prefix": "eventstopPropagation", 4 | "description": "事件冒泡", 5 | "body": [ 6 | "event.stopPropagation()" 7 | ] 8 | }, 9 | "json-stringify": { 10 | "prefix": "jsonStringify", 11 | "description": "JSON.stringify", 12 | "body": [ 13 | "JSON.stringify($1)" 14 | ] 15 | }, 16 | "json-parse": { 17 | "prefix": "jsonParse", 18 | "description": "JSON.parse", 19 | "body": [ 20 | "JSON.parse($1)" 21 | ] 22 | }, 23 | "localStorage-get": { 24 | "prefix": "localStorageGet", 25 | "description": "localStorage.getItem", 26 | "body": [ 27 | "JSON.parse(localStorage.getItem($1))" 28 | ] 29 | }, 30 | "localStorage-set": { 31 | "prefix": "localStorageSet", 32 | "description": "localStorage.setItem", 33 | "body": [ 34 | "localStorage.setItem(JSON.stringify($1))" 35 | ] 36 | }, 37 | } -------------------------------------------------------------------------------- /libs/underscore&lodash/sourcecode/signup.md: -------------------------------------------------------------------------------- 1 | # 阅读 Underscore.js 源码活动报名贴 2 | 阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 Underscore？最主要的原因是 Underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的 hack，更可以学到作者的整体设计思路以及 API 设计的原理。 3 | 4 | [@人世间](https://github.com/cyf0611) 和知行社打算用2周的时间。带着大家每天读一点 Underscore 源码。 5 | 6 | 扫下面的二维码报名~ 7 | ![](http://upload-images.jianshu.io/upload_images/7219342-f9f6e1d284426ceb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 8 | 9 | 报名后进下二维码进微信群 10 | ![](http://upload-images.jianshu.io/upload_images/7219342-faa179676753117f.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 11 | 12 | ## 资源 13 | * [带注释的源码地址](http://underscorejs.org/docs/underscore.html) 14 | * [如何阅读框架源代码](https://juejin.im/post/595910236fb9a06ba646398e) 15 | * [underscore 的源码解读](https://github.com/hanzichi/underscore-analysis) -------------------------------------------------------------------------------- /engineering/code-quality/code-style/html-style-simple.md: -------------------------------------------------------------------------------- 1 | # html代码风格简洁版 [详细版](html-style.md) 2 | * 缩进用两个空格 3 | * 头部必须包含[注1](#describe)的内容 4 | * 样式表文件 5 | * 非特殊情况下样式文件须放至`` 6 | * 引入样式表文件时, 须略去默认类型声明 7 | * 脚本文件 8 | * 非特殊情况下脚本文件须放至页面底部 9 | * 引入脚本文件时, 须略去默认类型声明 10 | * 属性使用双引号 11 | * 有些布尔值属性的值不需要被设置，如 `disabled`,`checked`。 12 | * URL 13 | * 省略协议。使用``而不是`` 14 | * 在域名末尾加`/` 原因见 http://www.douban.com/note/214496506/ 15 | * 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title 16 | * 自闭合（如img，br）元素不需要在尾部添加斜线 17 | * html的元素，属性，值，css选择器，选择器的属性和值使用小写字母 18 | * 在页面模块的开始和结束加注释 19 | 20 | ## 注1 21 | ``` 22 | 23 | 24 | 25 | 26 | Document 27 | 28 | 29 | 30 | ``` 31 | 32 | -------------------------------------------------------------------------------- /scene/wechat/miniprogram/content/authorize.md: -------------------------------------------------------------------------------- 1 | # 授权 2 | ## 获取用户的授权设置 3 | ``` 4 | wx.getSetting({ 5 | success (res) { 6 | console.log(res.authSetting) 7 | // res.authSetting = { 8 | // "scope.userInfo": true, 9 | // "scope.userLocation": true 10 | // } 11 | } 12 | }) 13 | ``` 14 | 15 | ## 打开设置 16 | 调起客户端小程序设置界面，返回用户设置的操作结果。2.3.0 版本开始，用户发生点击行为后，才可以跳转打开设置页，管理授权信息。 17 | **设置界面只会出现小程序已经向用户请求过的权限。** 18 | 19 | 打开小程序设置页的方法 20 | ``` 21 | 22 | 23 | 24 | 25 | openSetting() {wx.openSetting()} 26 | ``` 27 | 28 | 示例： 29 | 30 | ``` 31 | wx.openSetting({ 32 | success (res) { 33 | console.log(res.authSetting) // 操作结果 34 | // res.authSetting = { 35 | // "scope.userInfo": true, 36 | // "scope.userLocation": true 37 | // } 38 | } 39 | }) 40 | ``` -------------------------------------------------------------------------------- /find-jobs/resume/junior-question.md: -------------------------------------------------------------------------------- 1 | # 初级前端实战问题 2 | ## CSS 问题 3 | * 列举下你知道的 CSS 选择器和选择器的权重。 4 | * 选择器 `:nth-child` 和 `:nth-of-type()` 的区别？ 5 | * 哪些 CSS 的属性会继承。 6 | 7 | ### 布局 8 | * 你知道哪些布局技术？ 9 | * 清楚浮动怎么写(clearfix)？ 10 | * boxsizing 的常用值怎么写？ 11 | * 用 inline-block 和 Flex 实现两端对齐，怎么写？ 12 | * position 有哪些值？绝对定位的定位规则是怎样的？ 13 | * 响应式样布局技术有哪些？ 14 | * 你用过栅格系统吗？ 15 | * rem 与 px的单位是如何换算的？ 16 | 17 | ### 规则 18 | * 在宽高为 `200 * 200` 的div 设置背景图，背景图设置在右下角，大小设置为 `100 * 100`。背景原图大小是 `500 * 500`。 怎么写？ 19 | * transform 属性有哪些属性？ 20 | * 用 CSS 来做动画，有哪些方式？ 21 | 22 | ### 兼容性 23 | * 聊聊你知道的浏览器bug？ 24 | * 你知道浏览器的差异？ 25 | 26 | ## JS 27 | * == 和 === 有什么区别？ 28 | * 聊聊你对 cookie，localStroge 的异同的理解？ 29 | * 写个函数，实现数组内容去重。 30 | 31 | ### 事件 32 | * 请描述事件冒泡机制？ 33 | 34 | ### HTTP 35 | * HTTP 的 get 和 post 方法有什么区别？ 36 | * 聊聊同源策略？如何跨域？ 37 | 38 | ## 框架 39 | * 你用过哪些前端框架？最喜欢哪个 40 | 41 | ## 开放性问题 42 | * 你工作中常用的前端工具有哪些？ 43 | * 你常逛的程序员网站有哪些？ 44 | * 你最近在读什么书？ 45 | * 你的职业规划是怎样的？ -------------------------------------------------------------------------------- /language/css/summary/style.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | margin-bottom: 10px; 3 | width: 30px; 4 | height: 40px; 5 | background-color: red; 6 | } 7 | 8 | #b { 9 | color: red; 10 | } 11 | .a { 12 | color: green; 13 | } 14 | p { 15 | color: yellow; 16 | } 17 | #b { 18 | color: blue; 19 | } 20 | 21 | .ly { 22 | display: flex; 23 | margin: 0 auto; 24 | width: 800px; 25 | } 26 | 27 | .block { 28 | position: relative; 29 | margin-right: 10px; 30 | width: 100px; 31 | height: 100px; 32 | background-color: rgb(114, 120, 191); 33 | } 34 | 35 | .block:last-child{ 36 | margin-right: 0; 37 | flex-grow: 1; 38 | } 39 | .block:before, .block:after { 40 | position: absolute; 41 | padding: 5px 10px; 42 | background-color: rgb(187, 114, 191); 43 | color: #fff; 44 | } 45 | .block:before { 46 | content: '热'; 47 | top: 0; 48 | left: 0; 49 | } 50 | .block:after { 51 | content: '冷'; 52 | bottom: 0; 53 | right: 0; 54 | } -------------------------------------------------------------------------------- /language/css/detail/basic/place.md: -------------------------------------------------------------------------------- 1 | # 样式写在哪 2 | ## 写在一个文件里 3 | 写在一个文件里的样式叫做外部样式表。 4 | 这样的文件的后缀名为`css`。 5 | 例如,`mystle.css`文件中的内容 6 | ```css 7 | hr {color: sienna;} 8 | p {margin-left: 20px;} 9 | body {background-image: url("images/back40.gif");} 10 | ``` 11 | 12 | 页面中用外部样式表要用`link`标签，例如 13 | ``` 14 | 15 | ``` 16 | `link`标签要放在`head`标签中。否则页面可能会闪烁。 17 | 18 | ## 写在`style`标签内 19 | 写在`style`标签内的样式称为内部样式表。例如 20 | ``` 21 | 26 | ``` 27 | 28 | ## 写在标签的`style`属性里 29 | 写在标签的`style`属性里的样式称为，称为内联样式。例如 30 | ``` 31 |

32 | This is a paragraph 33 |

34 | ``` 35 | 36 | ## 外部样式表，内部样式表，内联样式 哪种方式好 37 | 推荐使用外部样式表。不建议使用内部样式表和内联样式。 38 | 39 | 原因： 40 | 外部样式表 41 | * 能被复用 42 | * 能被缓存 43 | -------------------------------------------------------------------------------- /language/css/tool/cheatsheet/README.md: -------------------------------------------------------------------------------- 1 | # CSS3 Cheatsheet 2 | ## 说明 3 | * `[]` 表示可选 4 | * `|` 表示或 5 | * `*` 表示循环0或N次 6 | 7 | ## box shadow 8 | `box-shadow: 水平阴影的位置 垂直阴影的位置 [模糊距离] [阴影的颜色] [inset]` 9 | 如 10 | ``` 11 | box-shadow: 9px 9px 33px -2px #bd2abd; 12 | ``` 13 | 14 | ## 动画 15 | `animation: 动画名称 动画持续时间 动画的速度曲线 延时（可以是负值） 播放次数 播放方向 动画的状态 动画结束后停留状态` 16 | 17 | `@keyframes： {百分数|from|to{属性：值} [,百分数|from|to{属性：值}]* }` 18 | 19 | 20 | 如 21 | ``` 22 | p { 23 | animation: slidein 3s ease-in 1s; 24 | } 25 | @keyframes slidein { 26 | from { 27 | margin-left: 100%; 28 | width: 300%; 29 | } 30 | 31 | to { 32 | margin-left: 0%; 33 | width: 100%; 34 | } 35 | } 36 | 37 | ``` 38 | 39 | ## flex 40 | 父元素设置 `display: flex;`,以及 41 | * flex-direction: 主轴方向。 row | row-reverse | column | column-reverse 42 | * flex-wrap 43 | 44 | 更多见 [Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /language/js/intro/ECMAScript.md: -------------------------------------------------------------------------------- 1 | # JavaScript 版本(ES5, ES6, ES2016, ES.Next) 2 | * ECMAScript：一个由 ECMA International 进行标准化，TC39 委员会进行监督的语言。通常用于指代标准本身。 3 | * JavaScript：ECMAScript 标准的各种实现的最常用称呼。这个术语并不局限于某个特定版本的 ECMAScript 规范，并且可能被用于任何不同程度的任意版本的 ECMAScript 的实现。 4 | * ECMAScript 5 (ES5)：ECMAScript 的第五版修订，于 2009 年完成标准化。这个规范在所有现代浏览器中都相当完全的实现了。 5 | * ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015)：ECMAScript 的第六版修订，于 2015 年完成标准化。这个标准被部分实现于大部分现代浏览器。可以查阅这张兼容性表来查看不同浏览器和工具的实现情况。 6 | * ECMAScript 2016：预计的第七版 ECMAScript 修订，计划于明年夏季发布。这份规范具体将包含哪些特性还没有最终确定 7 | * ECMAScript Proposals：被考虑加入未来版本 ECMAScript 标准的特性与语法提案，他们需要经历五个阶段：Strawman（稻草人），Proposal（提议），Draft（草案），Candidate（候选）以及 Finished （完成）。 8 | 9 | ## 参考 10 | * [ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事？「译」](http://huangxuan.me/2015/09/22/js-version/) 11 | 12 | ## 拓展阅读 13 | * [Learn ES2015： ES6 特性概览](https://babeljs.io/docs/learn-es2015/) 14 | * [New in ECMAScript 5](http://speakingjs.com/es5/ch25.html) 15 | -------------------------------------------------------------------------------- /language/css/detail/rules/media-queries/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Media Queries 写法示例 2 | 通过 Media Queries，可以给不同的设备设置不同的样式。 3 | 4 | ## 设备 5 | ### 屏幕 6 | ``` 7 | @media screen { 8 | 9 | } 10 | ``` 11 | 12 | ### 打印机 13 | ``` 14 | @media print { 15 | 16 | } 17 | ``` 18 | 19 | ## 屏幕尺寸 20 | ### 手机及更大 21 | ``` 22 | @media only screen and (min-width: 320px) { 23 | 24 | } 25 | ``` 26 | 27 | 注意：` (min-width: 320px)` 的括号不能少。 28 | 29 | ### 平板及更大 30 | ``` 31 | @media only screen and (min-width: 768px) { 32 | 33 | } 34 | ``` 35 | 36 | ### PC 37 | ``` 38 | @media only screen and (min-width: 980px) { 39 | 40 | } 41 | ``` 42 | 43 | ### 小于等于 iphone 4 44 | ``` 45 | @media only screen and (max-width:320px) and (max-height: 480px) { 46 | 47 | } 48 | ``` 49 | 50 | ## 屏幕方向 51 | ### 横屏 52 | ``` 53 | @media only screen and (orientation : landscape) { 54 | 55 | } 56 | ``` 57 | 58 | ### 竖屏 59 | ``` 60 | @media only screen and (orientation : portrait) { 61 | 62 | } 63 | ``` -------------------------------------------------------------------------------- /libs/reactVsVue.md: -------------------------------------------------------------------------------- 1 | # React 和 Vue 2 | ## 相似点 3 | * Virtual DOM 4 | * 组件化 5 | 6 | ## 不同点 7 | ### 模板语言 VS JSX 8 | 声名数据与UI的关系，Vue 是用的是模板语言。React 是 JSX。 9 | 10 | JSX 除了创建元素这块有点特别，别的都是 JS 操作。如 11 | ``` 12 | constructor(props) { 13 | super(props) 14 | this.state = {list: [{value:1}, {value:2}]} 15 | } 16 | render() { 17 | return ( 18 |
    19 | {this.state.list.length > 0 && this.state.list.map(item =>
  • {item.value}
    • )} 20 |
21 | ) 22 | ``` 23 | 24 | 相对学习成本低。 25 | 26 | 对应 Vue 27 | ``` 28 | 29 |
    30 |
  • {{item.value}}
    • 31 |
      32 | 33 | 34 | 43 | ``` 44 | 45 | 劣势是要学一些模板语言的语法，v-for,v-if, v-model 等。优势是，支持自定义指令(@keyup.enter="xxx")，过滤器等高级特性。 46 | 47 | ### 生态 48 | React 的新鲜玩意比较多。 49 | -------------------------------------------------------------------------------- /libs/rxjs/demo/use-with-vue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue use Rx 6 | 7 | 8 | 9 |
      10 | 11 |
      12 | 13 | 14 | 36 | 37 | -------------------------------------------------------------------------------- /libs/graphql/README.md: -------------------------------------------------------------------------------- 1 | # GraphQL 2 | 将逻辑从 Schema 中抽出来，将 GraphQL Sever 四个逻辑部分为 Schema, Resolver, Model 和 Connecor。 3 | 4 | Schema 定义有哪些字段， GraphQL Server 通过 URL及参数来 决定调用动态调用哪些 Resolver， Resolver 来掉对应的 Connector， Connector 调 Model 来进行数据库操作。 5 | 6 | 用 dataloader 来做数据缓存，减少查数据库的次数。 7 | 8 | ## Schema 9 | 字段的类型支持 `String`, `Int`, `Float`, `Boolean`, `ID`。 字段非空在值后`!`。如: 10 | ``` 11 | enum Gender { 12 | GIRL 13 | NORMAL 14 | LOW 15 | } 16 | 17 | type User { 18 | name: String!, 19 | gender: Gender 20 | friends: [User], 21 | other(query: String): Int // 传参的写法 22 | } 23 | ``` 24 | 25 | 26 | [更多](https://graphql.org/graphql-js/basic-types/) 27 | 28 | ## 工具 29 | * [graphiql](https://github.com/graphql/graphiql) 发送 GraphQL 工具 30 | 31 | ## 资源 32 | * [Getting Started With GraphQL.js](https://graphql.org/graphql-js/) 33 | * [GraphQL tools](https://www.apollographql.com/docs/graphql-tools/) Apollo。 34 | * [《解析 GraphQL 的查询语法》【译】](https://zhuanlan.zhihu.com/p/40418866) 35 | 36 | -------------------------------------------------------------------------------- /focus-point/security/XSS/practice/level-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 输入内容： 12 | 13 |
      输出内容： 14 |
      15 |
      16 | 17 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /libs/vue/demos/scoped-slot.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scoped Slots 6 | 7 | 8 | 9 |
      10 | 11 | 14 | 15 |
      16 | 17 | 36 | 37 | -------------------------------------------------------------------------------- /find-jobs/README.md: -------------------------------------------------------------------------------- 1 | # 找工作 2 | 面试的时候，要保持自信。问题想清楚之后再回答。 3 | 4 | ## 目录 5 | * [评估自己的技术](assessment) 6 | * [面试问题](question) [vue 面试问题](question/vue.md) 7 | * [Web前端程序员简历模板](resume.md) 8 | * [前端工作招聘网站列表](https://dwqs.gitbooks.io/frontenddevhandbook/content/practice/front-end-jobs.html) 个人推荐用拉钩。 9 | * 向面试官提问 10 | * [当面试官问「你有什么要问我的吗」时，应该问什么？ 知乎](https://www.zhihu.com/question/28058827) 11 | * [Questions to ask your interviewer](https://rkoutnik.com/articles/Questions-to-ask-your-interviewer.html) 12 | 13 | ## 其他 14 | 如何成为靠谱的前端工程师？小胡子哥这么说： 15 | 16 | - 你需要扎实的基础，JS 中的每个知识点你都能答上，NodeJS 的 API 你都会用，设计模式基本都了解，懂点算法，写过几个大型的项目/程序。这一方面可以确保你的编程能力 OK； 17 | 18 | - 做过大流量/高并发/高日活等比较有特色的网站，对项目中的技术问题有思考，并且出过方案，同时有相关的技术细节总结；或者在 github 上开源了不少的项目，同时项目的 fork 和 star 数量都超过一两百；这方面可以确保你的项目经验 OK； 19 | 20 | - 带领并主导过三五个一起完成项目，Owner 过一部分的产品规划，或者具备很强的 PM 意识；培养了几个不错的新人，在各方面的成长都很不错；这方面可以保证你的组织能力和领导能力 OK； 21 | 22 | 当然，以上的三点要求是递增的，做到这三点的人，到阿里差不多有 P7 的水平了。以上可以从表面上看出你是一名靠谱的工程师，实际的能力还需要从平时的沟通中了解，你的性格、你的价值取向是否符合团队气质，你的工作是否让客户、合作伙伴满意，靠谱的人总是让人省心。 -------------------------------------------------------------------------------- /focus-point/security/XSS/practice/level-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 输入内容： 12 | 13 |
      输出内容： 14 |
      15 |
      16 | 17 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /libs/Polymer.md: -------------------------------------------------------------------------------- 1 | # Polymer 2 | 用 [web components](http://webcomponents.org/) 的方式来做应用的一个框架。 3 | 4 | ## 需要注意的 5 | * web component 的名称不能带大写字母 6 | 7 | ## 一些概念 8 | ### shadow DOM 9 | Shadow DOM 是指浏览器的一种能力，它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。 10 | 11 | 简单来说，Shaow DOM 里的 CSS 和 JS 不会影响主DOM，主DOM 的 CSS 和 JS 也不会影响到DOM。 12 | 13 | ### 会影响 shadow DOM 的选择器 14 | * ::shadow 15 | * /deep/ 新的规范是 >>>。 这个选择器是否应该存在有争议。 16 | * :host 17 | * :host-context 18 | * ::content 19 | 20 | 详细解释见 [Shadow DOM CSS Cheat Sheet](http://robdodson.me/shadow-dom-css-cheat-sheet/)。 21 | 22 | 23 | ## 相关链接 24 | * [官网](https://www.polymer-project.org/1.0/) 25 | * [Github](https://github.com/Polymer/polymer) 26 | * [A Guide to Web Components | CSS-Tricks](https://css-tricks.com/modular-future-web-components/) 27 | 28 | # Demo 29 | * [Grid Element](http://charbelrami.github.io/grid-element/) 用 Polymer 和 Flex 做的响应式 Grid。 [Github](https://github.com/charbelrami/grid-element) 30 | 31 | ## 待探究 32 | * 如何与组件通信 33 | * 如何给组件绑事件 34 | * 组件能嵌套组件吗？ 35 | -------------------------------------------------------------------------------- /language/js/grammar/outline.md: -------------------------------------------------------------------------------- 1 | # 基本语法 2 | ## 语句 3 | 语句（statement）是为了完成某种任务而进行的操作。如 4 | ``` 5 | var a = 3; 6 | ``` 7 | 8 | 语句要以 `;` 结尾。 9 | 10 | ## 变量 11 | 变量是对值的引用，使用变量等同于引用一个值。每一个变量都有一个变量名。 12 | 13 | ### 声明变量 14 | 声明变量需用 `var`。 15 | ``` 16 | var a; 17 | ``` 18 | 上面的代码即声明了变量名为 a 的变量。同一条var命令中声明多个变量，如 19 | ``` 20 | var a, b, c; 21 | ``` 22 | 23 | ### 给变量赋值 24 | 声明变量后，就可以给变量赋值。 25 | ``` 26 | a = 3; 27 | ``` 28 | 注意：如果变量没声明就赋值，会报错。可以在声明变量的同时赋值，如 29 | ``` 30 | var a = 3; 31 | ``` 32 | 33 | ## 标识符 34 | 标识符（identifier）是用来识别具体对象的一个名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript语言的标识符对大小写敏感，所以a和A是两个不同的标识符。 35 | 36 | 合法的标识符： 字母，数字和下划线；不能以数字打头。列举几个合法的标识符 37 | ``` 38 | name 39 | i18N 40 | _sayIt 41 | find_answer 42 | ``` 43 | 44 | ## 代码块 45 | 用大括号，将多条相关的语句组合在一起，称为代码块。如 46 | ``` 47 | if(isSunny){ 48 | var weather = '晴天'; 49 | console.log('今天是' + weather); 50 | } 51 | ``` 52 | 53 | ## 注释 54 | 注释即对代码的解释。注释不会被执行。Javascript 提供两种注释：单行注释，多行注释。例如 55 | ``` 56 | // 这是单行注释 57 | 58 | /* 59 | 这是 60 | 多行 61 | 注释 62 | */ 63 | ``` 64 | -------------------------------------------------------------------------------- /language/css/detail/rules/list.md: -------------------------------------------------------------------------------- 1 | # 列表样式规则 2 | 列表样式规则只对li元素和 display 为 list-item 的元素生效 3 | 4 | ## list-style-type 5 | 设置列表项标记的类型。常用的值 6 | * none 无 7 | * disc 默认。标记是实心圆。 8 | * circle 标记是空心圆。 9 | * square 标记是实心方块。 10 | * decimal 标记是数字 11 | * lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) 12 | * upper-roman 大写罗马数字(I, II, III, IV, V, 等。) 13 | * lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) 14 | * upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) 15 | 16 | 更多值见[这里](http://www.w3school.com.cn/cssref/pr_list-style-position.asp) 17 | 18 | ## list-style-position 19 | 设置在何处放置列表项标记。可选值 20 | * inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 21 | * outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 22 | * inherit 23 | 24 | ## list-style-image 25 | 使用图像来替换列表项的标记。可选值 26 | * URL 图像的路径。 27 | * none 默认。无图形被显示。 28 | 29 | 如 30 | ``` 31 | list-style-image:url("/i/arrow.gif"); 32 | 33 | ``` 34 | 35 | ## list-style 36 | 设置所有的列表属性。如 37 | ``` 38 | ul 39 | { 40 | list-style:square inside url('/i/arrow.gif'); 41 | } 42 | ``` -------------------------------------------------------------------------------- /key-point/react/README.md: -------------------------------------------------------------------------------- 1 | # React 核心知识点 2 | ## JSX 3 | 4 | ## 事件 5 | ### bind this 6 | ```js 7 | this.doSth.bind(this, otherParam) // 最后一个参数是 event。 8 | JSX 9 | 10 | ## 组件 11 | ### propTypes 12 | 设置组件属性的类型。 13 | 14 | ### 获取组件下的内容 15 | 类似 Vue 中的 slot。 写法： 16 | ```js 17 | props.children 18 | ``` 19 | 20 | ## 工具 21 | * [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension) 22 | 23 | ## 文档 24 | * [中文文档](https://zh-hans.reactjs.org/) 25 | 26 | ## 推荐阅读 27 | * [Thinking in React](https://reactjs.org/docs/thinking-in-react.html) 28 | * [React.js 小书](http://huziketang.mangojuice.top/books/react/) 29 | * [组合 vs 继承](https://zh-hans.reactjs.org/docs/composition-vs-inheritance.html) 30 | * [React 未来之函数式 setState](https://juejin.im/post/58cfcf6e44d9040068478fc6) 31 | * [5 分钟理解 snapshot testing](https://egghead.io/lessons/javascript-use-jest-s-snapshot-testing-feature) 32 | * [Refs and the DOM](https://zh-hans.reactjs.org/docs/refs-and-the-dom.html) 33 | * [Portals](https://zh-hans.reactjs.org/docs/portals.html) -------------------------------------------------------------------------------- /resource/books/note/clean-code.md: -------------------------------------------------------------------------------- 1 | # 代码简洁之道 2 | 关于提供提升代码质量的建议的书。 3 | 4 | ## 有意义的命名 5 | 命名要满足 6 | * 名副其实 7 | * 避免误导。如命名为 isValid 的变量类型应该是布尔类型的。如果不是布尔类型的就会很坑。 8 | * 有意义的区分。如 getAccount,getAccounts,getAccountInfo 有什么区别。 9 | * 使用读得出来的名称。如 DtaRcrd 是个啥，DataRecord 好很多。 10 | * 使用可搜索的名称 11 | * 命名中避免使用编码 12 | * 每个概念对应一个词。一个概念可以用多个词来描述。比如 DeviceManager 和 DeviceController。在代码中，对于同一个概念，要同一个词。 13 | * 别用双关语。 14 | * 使用解决法案领域名称。 15 | * 添加有意义的语境，不添加的多余的语境。 16 | * 别装逼。有明确的词语而不是一些装逼的词（比如一些梗）。 17 | 18 | ## 函数 19 | * 短小。 20 | * 一个函数只做一件事。这有助于测试和代码复用。 21 | * 函数的参数不应该超过 3 个。如果函数的参数超过 3 个，应该将一些参数进行封装。 22 | * 函数尽可能无副作用。无副作用指不修改传入的参数和全局变量。 23 | * 使用异常替代返回错误码 24 | * 错误处理就是一件事。错误处理的函数不应该做其他事。 25 | * 减少重复代码。记得在某个文章中看到说，如果重复的代码出现 3 次，就应该重构重复的代码。 26 | 27 | ## 注释 28 | * 注释的恰当用法是用来弥补我们在用代码表达意图时遭遇的失败。 29 | * 注释存在的时间越久，意思容易其离描述的越远。因为一般程序员不会坚持维护注释。 30 | * 什么时候应该用注释 31 | * 法律信息。如版权信息。 32 | * 警示。比如，不要删除下面的代码，否则后果自负，哈哈 33 | * 阐述某些复杂的算法。 34 | * TODO 注释。 35 | * 放大某种看起来不合理的代码的重要性。 36 | 37 | ## 代码风格 38 | * 缩进 39 | 40 | ## 对象和数据结构 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /language/css/detail/rules/animate/config.rb: -------------------------------------------------------------------------------- 1 | require 'compass/import-once/activate' 2 | # Require any additional compass plugins here. 3 | 4 | # Set this to the root of your project when deployed: 5 | http_path = "/" 6 | css_dir = "demo/assets/css" 7 | sass_dir = "demo/assets/sass" 8 | images_dir = "demo/assets/images" 9 | 10 | # You can select your preferred output style here (can be overridden via the command line): 11 | # output_style = :expanded or :nested or :compact or :compressed 12 | 13 | # To enable relative paths to assets via compass helper functions. Uncomment: 14 | # relative_assets = true 15 | 16 | # soucemap。To disable debugging comments that display the original location of your selectors. Uncomment: 17 | line_comments = false 18 | 19 | 20 | # If you prefer the indented syntax, you might want to regenerate this 21 | # project again passing --syntax sass, or you can uncomment this: 22 | # preferred_syntax = :sass 23 | # and then run: 24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 25 | -------------------------------------------------------------------------------- /language/css/summary/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 概览示例 6 | 7 | 8 | 9 |

      选择器和规则

      10 |
      11 |
      12 | 13 |

      样式规则哪条生效

      14 |

      xxx

      15 | 16 |

      布局和细节

      17 |

      元素类型

      18 |
      块级元素加粗(细节)
      19 |

      块级元素

      20 | 行内元素 21 | 行内元素 22 | （inline-block） 23 | 24 | 25 | 行内变块级元素 26 |
      块级元素变行内
      27 |
      块级元素变行内
      28 | 29 |

      布局

      30 |
      31 |
      32 |
      33 |
      34 |
      35 |

      常见属性规则

      36 | 点我查看 37 | 38 | 39 | -------------------------------------------------------------------------------- /language/js/DOM/valid-input/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 表单验证 demo 7 | 8 | 9 | 10 |

      用H5中的规范来做验证 https://html.spec.whatwg.org/multipage/forms.html#validitystate

      11 |
      12 | 13 |
      14 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /language/svg/overview/shape.md: -------------------------------------------------------------------------------- 1 | # 形状写法示例 2 | ## 线 3 | ``` 4 | 5 | ``` 6 | 7 | ## 折线 8 | ``` 9 | 10 | ``` 11 | 12 | ## 矩形 13 | 在座标为 (10,20) 的地方画一个宽 30，高 15 的矩形。 14 | ``` 15 | 16 | 17 | 18 | ``` 19 | 20 | 背景色红色的矩形。 21 | ``` 22 | 23 | 24 | 25 | ``` 26 | 27 | 带边框的矩形。 28 | ``` 29 | 30 | 31 | 32 | ``` 33 | 34 | 圆角矩形。 35 | ``` 36 | 37 | 38 | 39 | ``` 40 | 41 | ## 多边形 42 | ``` 43 | 44 | ``` 45 | 46 | ## 圆 47 | ``` 48 | 49 | ``` 50 | 51 | (cx, cy) 是圆心座标 52 | 53 | ## 椭圆 54 | ``` 55 | 56 | ``` 57 | 58 | (cx, cy) 是椭圆中心座标 59 | cx 为长轴半径 60 | cy 为短轴半径 61 | -------------------------------------------------------------------------------- /language/js/grammar/date/api.md: -------------------------------------------------------------------------------- 1 | # 日期 2 | ## 初始化 3 | [new Date()](http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.3.1) 4 | * new Date () 5 | * new Date (str) 6 | * new Date (year, month [, date [, hours [, minutes [, seconds [, ms ] ] ] ] ] ) 7 | 8 | iphone 5c ½âÎö new Date(2016-03-31 17:35:23) ÓÐÎÊÌ⣬½â¾ö·½°¸ 9 | ``` 10 | /* 11 | * @param timestr 2016-03-31 17:35:23 12 | */ 13 | function toTimeValue(timestr) { 14 | var dateArr = timestr.split(' ')[0].split('-'); 15 | var timeArr = timestr.split(' ')[1].split(':'); 16 | var date = new Date(dateArr[0], parseInt(dateArr[1] - 1), dateArr[2], timeArr[0], timeArr[1], timeArr[2]); 17 | return date.getTime(); 18 | 19 | } 20 | ``` 21 | 22 | ## 日期对象上的操作 23 | * getTime 24 | * getFullYear 25 | * getMonth 26 | * getDate 27 | * getHours 28 | * getMinutes 29 | * getSeconds 30 | 31 | 32 | ``` 33 | (new Date()).getTime(); 34 | ``` 35 | 36 | ## 静态对象 37 | * Date.now() 38 | 39 | 40 | ## 参考 41 | * [MDN Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) 42 | -------------------------------------------------------------------------------- /language/js/grammar/types/string/README.md: -------------------------------------------------------------------------------- 1 | # 字符串方法 2 | ## 创建 3 | ``` 4 | var str = '' 5 | var str = "" 6 | var str = `` 7 | ``` 8 | 9 | ## 改 10 | 字符串连接 11 | ``` 12 | 'a' + 'b' 13 | 14 | var a = 'a' 15 | var b = 'b' 16 | `${a}${b}` 17 | 18 | 'a'.concat('b') 19 | ``` 20 | 21 | 转化成数组 22 | ``` 23 | 'a,b,c'.split(',') // ['a', 'b', 'c'] 24 | ``` 25 | 26 | 去空格 27 | ``` 28 | ' abc '.trim() 29 | ' abc '.leftTrim() 30 | ' abc '.rightTrim() 31 | ``` 32 | 33 | 子字符串 34 | ``` 35 | 'abcd'.slice(0,2) // 'ab' 36 | 'abcd'.slice(0,-1) // 'abc' 37 | ``` 38 | 39 | 替换 40 | ``` 41 | 'abc'.replace('a', 'b') // 'bbc' 42 | 'aac'.replace(/a/g, 'b') // 'bbc' 43 | ``` 44 | 45 | 编码 46 | ``` 47 | encodeURIComponent('我') 48 | decodeURIComponent(encodeURIComponent('我')) 49 | ``` 50 | 51 | 大小写 52 | ``` 53 | 'abc'.toUpperCase() 54 | 'abc'.toLowerCase() 55 | ``` 56 | 57 | ## 查 58 | 包含 59 | ``` 60 | 'abc'.includes('a') // true 61 | 'abc'.indexOf('a') !== -1 // true 62 | ``` 63 | 64 | 格式验证 65 | ``` 66 | /\d{11}/.test('13834333333') 67 | ``` 68 | 69 | 求值 70 | ``` 71 | eval('3+5') 72 | ``` 73 | -------------------------------------------------------------------------------- /language/css/detail/basic/intro.md: -------------------------------------------------------------------------------- 1 | # CSS介绍 2 | CSS是Cascading Style Sheets(层叠样式表)的缩写。 3 | CSS是一门语言（DSL）。 4 | CSS用来指定HTML元素的外观的。外观包括：大小（宽，高），位置，内容的对齐方式，字体等等。 5 | 下面是CSS代码： 6 | ``` 7 | .intro{ 8 | width: 100px; 9 | height: 200px; 10 | color: #ff0; 11 | background-color:red; 12 | } 13 | ``` 14 | 上面代码的意思是，指定所有类名为`intro`的元素有这样的外观：宽度为`100px`,高度为`200px`,字体颜色为`#ff0`,背景色为红色。 15 | 16 | 样式由**选择器**和**声明**两部分组成。声明由**属性**和**值**组成。 17 | 在上面的例子中 18 | * `.intro` 为选择器。 19 | * `width: 100px;height: 200px;...` 为声明 20 | * `width,color` 为声明的属性 21 | * `100px,#f00` 为声明的值 22 | 23 | ## 层叠 24 | 层叠样式表中的层叠的意思是：对同一个元素来，可以用多种选择器来选择（或者说指定）它。如对于一个如下的元素： 25 | ``` 26 |
      27 | ``` 28 | 以下的选择器均可以选择它 29 | 30 | * `div` 31 | * `.box` 32 | * `#play-music-box` 33 | 34 | 每个选择器的都可以定任意的规则。因此，有这样的可能，不同选择器都定义了一样的规则，但样式规则的值是不同的。这时，元素会怎么显示这规则？报错？啥都不显示？还是？ 35 | 36 | 答案是：元素显示权重高的选择器中定义的那条规则。 37 | 38 | ## 书籍推荐 39 | * [《图解CSS3：核心技术与案例实战》](http://www.w3cplus.com/book-comment.html) 40 | * CSS权威指南 41 | * 禅意花园 42 | * CSS那些事儿（林小志） 43 | 44 | -------------------------------------------------------------------------------- /language/html/tag-and-attr/demo/article.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 如何在知乎让一个回答24小时拿到1000个赞 6 | 7 | 8 |

      如何在知乎让一个回答24小时拿到1000个赞

      9 |
      发布于 2014-12-15 16:53 字数: 1067 阅读量: 3012
      10 |

      有些混知乎网的人很在乎自己拿到“赞同”的数量。我昨晚在知乎发了个回答，首发时间是2014年晚上19点19分，不到24小时，这个回答就拿了一千个赞。

      11 | 12 |

      24小时拿到一千个赞的知乎回答

      13 | 14 |

      15 | 好吧，我承认我是个擅长造噱头吸眼球的标题党。纵观简书有史以来的专题订阅、文章被喜欢的数，你会发现有一类文章得到的喜欢和文章的质量很不成比例——文章真的很水，却有无数人喜欢。这类文章，就是“如何让你一夜暴富”的诀窍文章——虽然经常用别的包装，比如如何掌握一种工具、如何看好书、如何有效管理时间。在传统出版界，这类文章叫《穷爸爸、富爸爸》、《恋爱秘诀》。 16 |

      17 | 18 |
      19 |
        20 |
      • 有些人把简书当作他的笔记本。
        • 21 |
      • 有些人把简书当作他的树洞。
        • 22 |
      • 有些人把简书当作他的后花园。
        • 23 |
      24 |
      25 | 26 |

      写于2014年12月15日16点50分。

      27 | 28 |
      29 | 30 |

      如果这篇文章对你有用，到这里给我打赏2元吧。我不但缺赞，更缺钱。

      31 | 32 | 33 | -------------------------------------------------------------------------------- /language/js/grammar/types/array/method-梳理.md: -------------------------------------------------------------------------------- 1 | # 数组方法 2 | ## 创建 3 | ``` 4 | var arr = []; 5 | var arr1 = [1,2,3]; 6 | ``` 7 | 8 | ## 新增 9 | push , 之后加 10 | unshift， 之前加 11 | splice() 中间加 12 | 13 | var arr = [1,2,3] 14 | [...arr, 4] 15 | [0, ...arr] 16 | [...arr.slice(0,2), 插入内容, ...arr.slice(2)] 17 | 18 | ## 删除 19 | splice() 20 | filter() 21 | 22 | ## 改 23 | arr[index] = 新值 24 | pop 25 | unshift 26 | arr.map 27 | ``` 28 | arr = arr.map((item, index) => { 29 | if(index === 目标下标) { 30 | return { 31 | ...item, 32 | 修改内容 33 | } 34 | } else { 35 | return item 36 | } 37 | }) 38 | ``` 39 | 40 | 两个数组合并 41 | [...arr1, arr2] 42 | arr1.concat(arr2) 43 | 44 | sort 排序 45 | 46 | join 数组转字符串 47 | 48 | ## 查 49 | arr[index] 50 | arr.length 51 | Array.isArray(目标) 是否是数组 52 | 53 | forEach 54 | some 有一个满足 55 | every 所有都满足 56 | reduce 57 | 58 | 找一个 59 | 有没有 [1,3,4].indexOf(3) 60 | find 61 | 62 | 找多个 63 | filter 64 | 65 | ## 文档 66 | * [数组文档](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array) 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /language/js/nodejs/debugger.md: -------------------------------------------------------------------------------- 1 | # 使用node-inspector来调试node 2 | ## 安装 3 | npm install -g node-inspector 4 | ## 启动 5 | * 启动要调试的项目： node --debug 文件名 6 | * 启动node-inspector:node-inspector --web-port=11111 默认监听端口为 8080 7 | * 用chrome浏览器打开 http://127.0.0.1:11111/debug?port=5858 选择文件打断点之类 8 | 9 | 10 | ## 一些选项 11 | ``` 12 | Option Default Description 13 | --help | | Print information about options 14 | --web-port | 8080 | Port to host the inspector 15 | --web-host | 127.0.0.1 | Host to listen on 16 | --debug-port | 5858 | Port to connect to the debugging app 17 | --save-live-edit | false | Save live edit changes to disk (update the edited files) 18 | --hidden | [] | Array of files to hide from the UI 19 | | | Breakpoints in these files will be ignored 20 | ``` 21 | 22 | ## 更多 23 | * [node-inspector github](https://github.com/node-inspector/node-inspector) 24 | -------------------------------------------------------------------------------- /scene/wechat/miniprogram/content/framework/event.md: -------------------------------------------------------------------------------- 1 | # 事件 2 | [文档](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html)。 3 | 4 | ## 事件 5 | 事件包括 冒泡事件 和 非冒泡事件。 6 | 7 | 冒泡事件: 8 | * touchstart, touchmove, touchcancel, touchend 9 | * tap 10 | * longpress 长按。手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发。 11 | * touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发。 12 | * transitionend 13 | * animationstart, animationiteration, animationend 14 | 15 | 用 `bind` 或 `catch` 跟 事件名来绑定事件。 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。如： 16 | ``` 17 | 18 | outer view 19 | 20 | inner view 21 | 22 | 23 | ``` 24 | 25 | 非冒泡事件: 26 | * form 的 submit 事件 27 | * input 的 input 事件 28 | 29 | 30 | ## event 上的对象 31 | * type 事件类型 32 | * currentTarget 事件绑定的当前组件。 33 | * dataset 当前组件上由data-开头的自定义属性组成的集合。 34 | * target 触发事件的源组件。 35 | * dataset 36 | * touches 37 | * pageX, pageY, clientX, clientY 38 | * mask -------------------------------------------------------------------------------- /libs/vue/experience/demo/aysnc-update.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
      14 |
      {{a}}
      15 |
      16 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /libs/underscore&lodash/sourcecode/content.md: -------------------------------------------------------------------------------- 1 | # 阅读 Underscore.js 源码活动内容说明 2 | 在阅读 Underscore.js 源码前，请先了解： 3 | * Underscore.js 出现的背景，主要解决什么问题。 4 | * 通读下 Underscore.js 的API文档。 5 | * Underscore.js 的整体架构。推荐看[这篇文章](https://github.com/hanzichi/underscore-analysis/issues/27)。 6 | 7 | 希望大家完读源码，能解决如下问题： 8 | * 若干个异步操作，全部请求完成后需要触发某个方法，用 Underscore 的哪个方法，如何实现的？ 9 | * 如何防止命名冲突？比如 项目里，有别的第三方库和 Underscore，也是把方法绑在 `_` 上的。如何将 Underscore 绑到其他变量上？ 10 | * 什么是链式调用，如何实现链式调用的？ 11 | * Underscore 是如何支持 OOP（面向对象编程）的调用的？如 `_([1, 2, 3]).each(cb)` 12 | * 什么是去抖函数(throttle)，如何实现？ 13 | * 什么是节流函数(debounce)，如何实现？ 14 | * 如何同时支持 Common.js 的模块规范，AMD的模块规范，以及直接通过 `script` 标签，都能用 Underscore? 15 | * Underscore.js 中的哪些代码，让程序更健壮？ 16 | * Underscore.js 有写的不好的地方吗，该如何优化？ 17 | 18 | **大家打卡的内容可以是对上面的某个问题的解答，也可以是其他感悟**。 19 | 20 | 带注释的源码地址如下： 21 | * [官方版](http://underscorejs.org/docs/underscore.html) 英文。推荐。 22 | * [中文翻译](https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/underscore-1.8.3-analysis.js) 英文实在不好的，就看这个吧。 23 | 24 | 别人的读 Underscore 系列 25 | * [underscore 的源码解读](https://github.com/hanzichi/underscore-analysis) 26 | 27 | 28 | -------------------------------------------------------------------------------- /language/js/DOM/valid-input/README.md: -------------------------------------------------------------------------------- 1 | # 表单验证 2 | ## 用HTML规范来做 3 | 通过元素上的`validity`来知道表单元素的验证情况。其值形如 4 | ``` 5 | { 6 | badInput: false 7 | customError: false, 8 | patternMismatch: false, 9 | rangeOverflow: false, 10 | rangeUnderflow: false, 11 | stepMismatch: false, 12 | tooLong: false, 13 | tooShort: false, 14 | typeMismatch: false, 15 | valid: false, 16 | valueMissing: true 17 | } 18 | ``` 19 | badInput，customError，valueMissing是各种错误情况，如果值是合法的，valid才为true。具体的字段的意义见[HTML规范](https://html.spec.whatwg.org/multipage/forms.html#validitystate) 20 | 21 | demo 22 | ``` 23 | document.querySelector('.number-input').validity;//知道表单元素的验证情况 24 | document.querySelector('.number-input').addEventListener('change', function(event) { 25 | console.log('valid status %o', event.target.validity); 26 | }); 27 | ``` 28 | 29 | ## 用验证组件 30 | 用插件[jquery-validation](https://github.com/jzaefferer/jquery-validation)。见[这里](https://github.com/iamjoel/front-end-plugins/tree/master/detail/validate) 31 | 32 | ## 参考 33 | * [Input validity in the HTML spec](http://ianmcnally.me/blog/2015/6/25/input-validity-in-the-html-spec) -------------------------------------------------------------------------------- /language/js/interact-with-server/http/README.md: -------------------------------------------------------------------------------- 1 | # HTTP 2 | * [超文本传输协议（HTTP）介绍](intro.md) 3 | * [浏览器缓存](browser-cache.md) 4 | 5 | ## 未整理 6 | HTTP 1.1 协议 中就把 Connection 的默认值改成了Keep-Alive，这样同一个域名下的多个 HTTP 请求就可以复用同一个 TCP 请求。但不能避免 队头阻塞(HOC: Head of line blocking) （串行，一个一个来）的问题。 7 | 8 | HTTP2.0 最重要的一个特点是支持多路复用(Multiplexing)。多路复用指的是同一个域名下的多个 HTTP 请求共同分享同一个 TCP 链接，这是并发的请求，也就是多个请求的数据包可以同时发送。显然，这就要求每个数据包要做好标记，自己属于哪一个 HTTP 请求，这样客户端才能在收到包以后拼装起来。 9 | 10 | 当然 HTTP2.0 的好处远远不止这些，由于支持了多路复用，我们可以很容易的基于 HTTP2.0 实现长连接，而以往的选择要么是用更底层的 TCP，要么是使用与 HTTP 同级的 Web Socket 协议。 11 | 12 | 13 | ## 推荐阅读 14 | * [HTTP 下午茶](https://ccbikai.gitbooks.io/http-book/content/index.html) 15 | * [Jerry Qu HTTP 相关专题](http://imququ.com/series.html) 16 | * [HTTP 缓存策略](http://foofish.net/blog/95/http-cache-policy) 17 | * [http2讲解](https://www.gitbook.com/book/ye11ow/http2-explained/details) 18 | * [HTTP 权威指南](http://book.douban.com/subject/10746113/) 19 | * bestswifter 的[网络基础知识系列](http://www.jianshu.com/nb/3276500) 20 | * [[面试∙网络] TCP/IP（一）：数据链路层](http://www.jianshu.com/p/f16d7f3c8d5f) 21 | * [[面试∙网络] TCP/IP（二）：IP协议](http://www.jianshu.com/p/9cb5cf1864da) 22 | -------------------------------------------------------------------------------- /language/html/html5/elements-and-attrs/removed-attrs.md: -------------------------------------------------------------------------------- 1 | # 废弃的属性 2 | | 对应元素 |属性名称 | 3 | |----------|:-------------:|------:| 4 | | caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr | align | 5 | | body | alink, link, text, vlink | 6 | | body | background | 7 | | table, tr, td, th, body | bgcolor | 8 | | object | border | 9 | | table | cellpadding, cellspacing | 10 | | table | frame | 11 | | table | rules | 12 | | col, colgroup, tbody, td, tfoot, th, thead, tr | char, charoff | 13 | | br | clear | 14 | | dl, menu, ol, ul | compact | 15 | | table | frame | 16 | | iframe | frameborder | 17 | | iframe | marginheight, marginwidth | 18 | | iframe | scrolling | 19 | | td, th | height | 20 | | img, object | hspace, vspace | 21 | | hr | noshade | 22 | | hr | size | 23 | | li, ol, ul | type | 24 | | col, colgroup, tbody, td, tfoot, th, thead, tr | valign | 25 | | hr, table, td, th, col, colgroup, pre | width | 26 | 27 | HTML5的规范里有对这些属性的代替方案，[点击访问](http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features) 28 | -------------------------------------------------------------------------------- /resource/bookmark/site.md: -------------------------------------------------------------------------------- 1 | # 设计的不错的网站 2 | * [小米手环](http://www.mi.com/shouhuan/#home) 3 | * [fir](http://fir.im/) 4 | * [七牛](http://www.qiniu.com/) 5 | * [QQ浏览器](http://browser.qq.com/index_m.html) 6 | * [fff](http://fff.cmiscm.com/#!/main) 酷到不懂怎么实现的，哈哈 7 | * [siteinspire](https://www.siteinspire.com/) 8 | 9 | * Codrops 10 | * [2015 酷炫 Demo](http://tympanus.net/codrops2015/) 11 | * [2016 酷炫 Demo](http://tympanus.net/codrops2016/) 12 | 13 | ## 设计机构官网 14 | * [Sequence](http://www.sequence.co.uk/) Sequence 所提供的服务主要是在线的品牌创意和设计解决方案，旨在帮助品牌在线上茁壮成长。 15 | * [Olson Agency](http://www.olson.com/) Olson 是一个顶尖的营销和设计机构，简单但是非常成熟的运营理念是他们的特色，强大的执行力是他们成功的基石。这一点从他们的网站设计上就能体现出来，色彩丰富但是不显得杂乱，大字体排版布局使得内容的表达足够“大声”，视觉化的表述方式相当有一套。 16 | * [Digital Next](https://www.digital-next.com.au/) Digital Next 是一家位于墨尔本的数字营销机构，他们的主要为客户提供PPC管理，网页设计和SEO优化。网站设计走的是清爽现代的风格，其间加入了微妙的动画效果，这个设计在当前看起来还挺主流的。 17 | 18 | ## 模板网站 19 | * [妹子UI 模板中心](http://tpl.amazeui.org/) 20 | * [模板之家](http://www.cssmoban.com/) 21 | 22 | ## 建站网站 23 | * [凡科](http://jz.faisco.com/pro11.html?_ta=2151) 24 | 25 | 26 | ## 页面模板 27 | * [Joomshaper template](https://www.joomshaper.com/joomla-templates) 28 | -------------------------------------------------------------------------------- /scene/wechat/miniprogram/content/framework/grammar.md: -------------------------------------------------------------------------------- 1 | # 语法 2 | ## WXML 3 | ### 条件 4 | ``` 5 | 1 6 | 2 7 | 3 8 | ``` 9 | 10 | 如果要一次性判断多个组件标签，可以使用一个 `` 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。 11 | ``` 12 | 13 | view1 14 | view2 15 | 16 | ``` 17 | 18 | `` 不会输出。 19 | 20 | 21 | ### 循环 22 | ``` 23 | 24 | {{idx}}: {{item.message}} 25 | 26 | 27 | 28 | {{idx}}: {{itemName.message}} 29 | 30 | ``` 31 | 32 | ### 引用 33 | 用 `import` 的方式 34 | ``` 35 | 36 | 39 | 40 | 41 | 42 |