Frond-end [Oakfire Wiki]

本页面只读。您可以查看源文件，但不能更改它。如果您觉得这是系统错误，请联系管理员。
====== Frond-end ======
<WRAP center tip 60%>
  * XMLHttpRequest: [[http://stackoverflow.com/questions/16094248/how-to-set-date-header-for-http-request|xhr 不能添加 Date header！]], 浏览器端调试api要注意这个！！[[https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader|MDN 详细说明]]
</WRAP>
 
  * [[.:html]]
  * [[.:css | CSS]]
  * [[.:Web_Developer_Security_Checklist|Web 开发者安全自检列表]]
  * [[https://www.techempower.com/benchmarks/|Web Framework Benchmarks]]
  * [[https://github.com/JacksonTian/fks|前端技能汇总 Frontend Knowledge Structure]]
  * [[http://usablica.github.io/front-end-frameworks/compare.html | A Comparison of Frond-end frameworks]]
  * [[https://whatwebcando.today/|What web can do today]]


===== DEBUG =====
  * <del>[[http://www.debuggap.com/|debuggap]]</del>
  * [[http://www.uc.cn/business/developer/|UC debug]]
===== Online tools =====
  * [[http://jsfiddle.net/]]
  * [[https://codesandbox.io/]]
  * [[http://rendur.com/]]
  * [[http://caniuse.com/|Can I use ...]] 查看 html,css 的某项特性在各浏览器环境是否可用。
  * [[http://www.xiconeditor.com/|ICO 图标在线制作]]
  * [[https://www.vectorizer.io/|img 转 svg 在线转换]]
===== Tips =====
  * 浏览器视口(viewport)相对于屏幕的坐标位置的获取：
    * 没有W3C标准。标准的''window.screenLeft''是浏览器窗口的屏幕坐标。
    * firefox 可以通过 ''window.mozInnerScreenX'' 获取，非标准。
    * 其它现代浏览器(chrome)需要用鼠标事件所带的 ''screenX'',''clientX'' 来计算。参考 https://github.com/rokmoln/browser-coords
  * 浏览器捕捉屏幕: [[https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture|MDN Screen capture]]
    * ''navigator.mediaDevices.getDisplayMedia''
    * [[https://developer.mozilla.org/en-US/docs/Web/API/MediaStream|MediaStream]]
===== LIB =====
  * [[http://placehold.it/|img 占位]]
  * [[http://fortawesome.github.io/Font-Awesome/examples/|Font Awesome]]
  * [[https://github.com/tabler/tabler|tabler]]:一个基于 Bootstrap 的网页 UI 框架，专用于开发管理后台
==== Grunt ====
  * [[http://gruntjs.com| gruntjs.com]]
==== Webpack ====
  * [[public:it:webpack]]
==== Polymer/LitElement ====
  * <del>[[http://polymer-project.org|polymer-project.org]]</del>
  * [[https://github.com/Polymer/polymer|github repo]]
  * [[https://github.com/Polymer/lit-element]]
  * [[https://lit-element.polymer-project.org/]]
==== angular js ====
  * v1.0: [[http://angularjs.org|angularjs.org]]
  * [[https://angular.cn/docs|angular.cn]]
  * newest: [[https://angular.io/|angular.io]]
  * [[angular]]
==== jquery ====
  * [[http://hayageek.com/jquery-ajax-form-submit/|jquery-ajax-form-submit]]
==== react ====
  * [[react]]
==== requirejs ====
  * [[http://requirejs.org/|requirejs.org]]
  * 单页可直接用 ''define(name, deps, fun(deps){})'' 来定义模块,解决依赖先后问题
==== vue ====
  * [[vue]]
  * [[http://vuejs.org]]
  * [[http://jiongks.name/blog/vue-code-review/|Vue.js 源码学习]]  囧克斯这个博客写了很多关于 VUE 的分析。
==== bootstrap ====
  * [[http://getbootstrap.com|bootstrap]] [[http://v3.bootcss.com/|中文]]
  * [[http://layoutit.com|layoutit.com]]
  * 比较适合移动开发

==== foundation ====
  * [[http://foundation.zurb.com/|foundation]]
  * 平面化风格
==== Animate.css ====
  * [[https://daneden.github.io/animate.css/|animate.css]]
===== Books =====
  * [[http://jsdatav.is/intro.html|Data Visualization with JavaScript]]

===== 坑 =====
  * android 微信服务号应用, 不能正常显示设置的字体, 只能在使用网络字体时, 才能加载三星手机已有的冬青丽体; ''@font-face'' 不能加载相对路径的字体. 截至到当前微信6.2版本问题仍存在, 不确定腾讯X5浏览器内核的版本号.