-
编辑器选型比较 quill (https://juejin.cn/post/6966993945973194765)
-
电脑上的 node_modules，使用软件包 npkill (https://github.com/voidcosmos/npkill)
-
一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧 https://juejin.im/post/6872128694639394830
-
动画库推荐11个 (https://juejin.im/post/5dd7278cf265da4ea640b398?utm_source=gold_browser_extension)
-
模拟 自定义接口返回数据 (http://myjson.com/j4jzm)
-
胖技术博客 前端学习视频（http://www.jspang.com/）
-
2019前端提升项目9个练习 (https://juejin.im/post/5dc0c744e51d456e7e41f5ac?utm_source=gold_browser_extension)
-
IOS 上微信在输入框弹起后，页面不恢复，下方有留白处理 (https://blog.csdn.net/m0_37520980/article/details/86305488)
-
IOS 上微信在输入框弹起后，页面不恢复，下方有留白处理 (https://blog.csdn.net/m0_37520980/article/details/86305488 http://blog.shzhaoqi.com/article/187)
-
vscode 正则常用表达查询插件：any-rule
-
前端CDN查询 https://miku.tools/cdnjs/
-
一个合格的前端都应该阅读这些文章
-
面试图谱（前端）
-
可视化脚手架
-
多端统一开发框架
-
树插件
-
js处理cookie，删除所有兼容ios 微信浏览器
-
var clearAll = function() { // FIXME:微信兼容 ,路径必须设置&日期设置为0 var keys = document.cookie.match(/[^ =;]+(?=\=)/g); if(keys) { for(var i = keys.length; i--;){ document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()+"; path=/"; } }; } -
-
-
前端富文本编辑器推荐
- wangEidtor 较轻量web富文本编辑器：目前正在开发中使用，踩坑后续补充
-
移动端开发辅助调试工具推荐
-
- 本质区别： you call libs, frameworks call you
-
electron（桌面应用开发）
-
银联开发学习
-
支付宝支付开发
-
微信公众号支付开发
-
正则学习
-
webGL
-
微信小程序开发
-
前端开发常用工具整理
-
测试辅助工具
- 原生嵌入h5
- 模拟器
-
安卓
- 夜神模拟器
- 海马玩模拟器
- BlueStacks(有点笨重，不推荐使用)
-
ios
- iPadian（感觉不好用）
-
安卓
- 抓包，代理
- fiddler（windows）
- wireshark
- 自动化测试、性能分析
- h5 自动化用：selenium
- 安卓ios应用自动化： appium
- jmeter性能分析
- 模拟器
- 原生嵌入h5
-
常用web开发浏览器
- pc：Safari、QQ浏览器、Google Chrome、Internet Explorer、Mozilla Firefox、360安全浏览器、搜狗高速浏览器、猎豹安全浏览器
- 手机端浏览器：QQ浏览器、UC浏览器、360手机浏览器、百度浏览器、搜狗浏览器、猎豹浏览器、chrome浏览器、欧朋浏览器、2345浏览器、绿茶浏览器
-
开发文档编辑
- MarkdownPad： 各种说明文档&开发文档整理编写（可以导出html）
-
常用笔记工具
-
<
8000
p dir="auto">产品原型图使用工具
- AxureRP
-
UI常用工具
- ps
- MarkMan：开速标注
- FastStone Capture（红绿工具）
-
视频录制（每帧可编辑）
- ScreenToGif
-
翻墙工具
- Shadowsocks
- Lantern
- Proxifier
- xx-net 推荐使用的免费稳定的翻墙软件（原理：代理 ，使用ipv6）
-
chrome常用插件
- 掘金： 为设计师、程序员、产品每日发现优质的内容
- 谷歌访问助手： 解决chrome扩展无法自动更新问题，同时可以访问google搜索，gmail邮箱，google+等谷歌服务
- ADB： 调试安卓
- Allow-Control-Allow-Origin： 跨域处理
- Axure RP Extension for Chrome：原型图预览
- Google翻译
- JSON-handle： json格式 beautiful view
- Vue.js devtools： vue 开发debug
- 草料二维码： 当前网址二维码
- Web Server for Chrome： 辅助 service workers
- Chrome 扩展的开发过程 https://segmentfault.com/a/1190000011733897
-
前端常用调试-移动设备
-
移动设备链接pc，chrome Remote Debugging
- chrome://inspect/#devices
- 模拟器（目前夜神模拟器&BlueStacks，在chrome上可以检测到 设备）打开页面，chrome Remote Debugging 检测
- UC浏览器访问调试 http://plus.uc.cn/document/webapp/doc5.html
- app嵌入web，调试方法总结
- 安卓机调试（真机）
- app开启调试模式
- 手机设置为：开发着模式
- 手机与电脑链接数据线
- chrome浏览器（需翻墙：推荐使用 xx-net翻墙工具）：访问 chrome://inspect/#devices， 查看当前检测到的设备，点击inspect 访问页面
- 夜深模拟器，安卓端：最好是用低版本，否则chrome检测不到访问的web，推荐版本 3.7.1.0，3.8.3.1
- chrome浏览器，打开移动设备检测页面（同安卓真机调试相同）
- 安卓机调试（真机）
-
移动设备链接pc，chrome Remote Debugging
-
常用开发编辑器
- vscode: 各种扩展，推荐使用
-
手动安装插件(具体教程链接 http://blog.csdn.net/wangwei703/article/details/54020712)
-
下载链接配置 https:// ${publisher}.gallery.vsassets.io/_apis/public/gallery/publisher/${publisher}/extension/${extension name}/${version}/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage
插件介绍链接页： https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome ${publisher} ：msjsdiag ${version}：页面版本信息（eg: 1.0.0） ${extension name}: debugger-for-chrome 修改下载的扩展插件名为(后缀一定是.visx) extension name.visx 本地cmd.exe安装指令 code --install-extension debugger-for-chrome.visx -
vscode常用插件
- 正对代码检查的，ts，js
- 自动保存，autofix功能开启
- 快速搜索node_modules： Search node_modules
- 丰富界面icon
- git辅助，等配置
- debug
- 开发文档编辑
- md
-
- WebStorm
- 常用插件
- sublime
- vscode: 各种扩展，推荐使用
-
node
- 版本管理工具
- nvm： 只能在 osx, linux环境下使用
- nvmw： windows 系统使用
- 版本管理工具
-
npm 资源切换
- NPM registry 管理工具
- nrm：能够查看和切换当前使用的registry
- NPM registry 管理工具
-
浏览器兼容性查询
-
团队协作开发辅助工具
- git
- git之https或http方式设置记住用户名和密码的方法
- git vim命令 http://blog.csdn.net/u010918847/article/details/51900073
- 辅助git工具
- SourceTree
-
git常用指令 http://blog.csdn.net/dengsilinming/article/details/8000622
- 复制远成仓库到本地： git clone [url]
- 查看远程仓库： git remote -v
- 添加远程仓库到本地: git remote add [name] [url]
- 删除远程仓库： git remote rm [name]
- git branch, git status, git merge
- 冲突处理步骤
- 手动处理conflict
- 使用Git时，在pull、merge、rebase的过程中，遇到conflict时，以上处理过程会终端，并且命令行中显示（xxx|MERGING）的状态（Windows下Git Bash中显示的状态），经常会遇到conflict的情况：
命令行下解决冲突的方法为 1.工具编辑有冲突的文件，去除冲突标记（就是>>>>>>>> ======= <<<<<<这样的东西），并把文本冲突解决掉； 2.然后使用git add 有冲突的文件，这时文件的冲突标记就变成了修改标记了（在windows下安装TortoiseGit就能看到文件图标的变化了）； 3.将所有有冲突的文件解决完后，使用git commit -a -m "Xxx"。 将本地修改的文件提交到远程仓库：git push [仓库名称]
- 手动处理conflict
- svn
- git
-
cmd
-
-
fiddler使用
-
pc windows开启https抓包，提示证书安装失败，解决方案
-
删除IE内容里的证书
-
删除：C:\Users<UserName>\AppData\Roaming\Microsoft\Crypto\RSA\ （这个路径下的文件就行了。不过我建议大家先备份里面的文件，否则出了问题，则无法恢复）
-
执行命令（cd 到fiddler安装目录）：cd d:\Program Files\Fiddler
makecert.exe -r -ss my -n "CN=DO_NOT_TRUST_FiddlerRoot, O=DO_NOT_TRUST, OU=Created by http://www.fiddler2.com" -sky signature -eku 1.3.6.1.5.5.7.3.1 -h 1 -cy authority -a sha1 -m 120 -b 09/05/2012
-
-
- ios出现https抓包tunnel to ，或者抓包失败处理
-
iOS 10.3升级之后，安装的证书默认是不启用的，需要手动去开启。
设置 –> 通用 –> 关于本机 –> 证书信息设置; 将Fiddler的证书开关打开就行了
-
- ios出现https抓包tunnel to ，或者抓包失败处理
-
其他优秀教程推荐
-
-
本地址配置一个http文件服务器
- anywhere
- http-server
- live-server (live-server --port=1233 --watch=D:/file/test) 可以实时刷新监听文件编辑修改
- http-server-spa (http-server-spa , eg: http-server-spa / index.html 1337 use history-api-fallback, single page applications with frontend routing)
- 使用ngnix
-
穿透内网方向代理
-
前端性能分析
-
flex布局学习
-
图片压缩
-
webpack学习地址
-
css写各种常用的icon（强烈推荐）
-
iconfont文字icon
-
一些不错的UI成套组件库
-
各种学习视频
-
小程序案例
-
可视化编辑
-
书单
/**书单 （s 11:14 2016/4/21）**/ 《javascript高级程序设计》 《javascript权威指南》 /**书单 （e 11:14 2016/4/21）**/ -
gulp + webpack 构建多页面前端项目
1、[微信调试](http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html) （1）wxdebugger_0.4.0_x64.exe 微信开发着工具 模拟微信客户端 http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html#.E4.B8.8B.E8.BD.BD.E5.9C.B0.E5.9D.80 （2）fiddler 抓包工具 （3） http://blog.qqbrowser.cc/kai-qi-wang-ye-diao-shi-jiao-cheng/ 2、Chair是支付宝前端团队推出的，基于Node.js的Web框架，适用于大部分的Web应用 http://www.html5cn.org/article-9285-1.html 开启网页调试教程 （微信调试工具） -
node.js学习（http://www.runoob.com/nodejs/nodejs-repl.html）
常用指令: 查看当前node的版本 node -v 查看npm的版本 npm -v nmp升级版本 npm install npm -g npm安装Node.js模块语法 npm install 模块名称（例如：express） 本地安装与全局安装： 本地安装（即项目当前环境） npm install 模块名称 全局安装（window） npm install 模块名称 -g 全局安装模块查看 npm ls -g Node.js模块卸载 npm uninstall 模块名称 模块更新 npm update 模块名称 搜索模块 npm search 模块名称 创建模块package.json npm init Jade 是 Node 的一个模板引擎，一句话就是让我们能够更快更简便地写HTML $ npm install jade -g artTemplate前端模板引擎 gulp插件命安装，并写入package npm install --save-dev 插件名称 gulp 插件 http://www.cnblogs.com/2050/p/4198792.html https://github.com/fmal/gulp-inline-source gulp-inline-source Inline all <script>, <link> and <img> tags that contain the inline attribute with inline-source. -
JSON.parse()和JSON.stringify()
（1）JSON.parse() 从一字符串中解析出json对象
例如：var srt="{"name":"name_text","age":"18"}";
JSON.parse(str);Object
age:"18", name: "name_text" __proto__: Object（2）JSON.stringify() 从一个对象解析出字符串
例如： var a={a:1,b:2};
JSON.stringify(a);
结果：
"{"a":"1","b":"2"}"
-
React 学习
(1) 一个简单demo
https://github.com/ruanyf/react-demos -
MVC框架 http://www.csdn.net/article/2014-08-27/2821409-javascript-framework-comparison
（1） AngularJS
（two-way）双向数据绑定，HTML扩展能力 http://www.ngnice.com/（2） Backbone.js
轻量级的MVC框架 https://github.com/Maluen/Backbone-Debugger backbone的dubug调试工具 推荐学习网站API http://www.css88.com/doc/backbone/ 今日学习 http://www.css88.com/doc/backbone/#Model（3） Ember.js
MV* 框架 http://todomvc.com/
vue，angular，avalon， react， weex http://cn.vuejs.org/guide/ http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Fvuejs.org%2F&h=1000&c=&n=vuejs -
视口单位vh vw
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android389支持
-
为什么网易淘宝等大型网站要把css和js直接写在页面内呢？
http://bbs.blueidea.com/thread-2950645-1-1.html
总结： （1）减少链接数
（2）防止出现外部调用css，js没有加载完毕的问题出现 （3）重要的栏目或者说叫分类、频道什么的这种的首页才这样做，首页的访问量大，可以减少连接数，也可以防止css没有加载完毕出现页面乱的现象，用户体验好 -
打包压缩工具 webpack
-
chorm 调试学习
http://umaar.github.io/devtools-animated-2016/#/88
http://blog.csdn.net/freshlover/article/details/42528643
移动端Web开发调试之Weinre调试教程
http://note.youdao.com/share/?id=9720dabd97e862ceee46af141ad4c4ac&type=note#/
-
、touch slide
（1） swiper
-
css参考手册 http://css.doyoe.com/
前端手册 https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/scoping-and-hoisting.html
-
IT问答网站 http://stackoverflow.com/
-
LayUi http://www.layui.com/ 前端插件 模板引擎
-
常用正则 http://www.w3cfuns.com/notes/17707/90260f5f78cf25a9d922ea5dc2097165.html
-
移动端传感器 http://www.w3cfuns.com/notes/14332/77c4fb52b5b6db04929fdb619c8e5692.html
-
创建SSH Key连接github或gitlab
http://blog.csdn.net/troy__/article/details/40082657?utm_source=tuicool&utm_medium=referral
-
百度H5 http://h5.baidu.com/
-
expressJs学习（基于node）
-
sublime text 3 代码校验插件的安装（包括js、css）
http://gaohaoyang.github.io/2015/03/26/sublimeLinter/ http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013745374151782eb658c5a5ca454eaa451661275886c6000
1.app.set(name,value) 把名字为name的项的值设为value，用于设置参数 app.set('views', path.join(__dirname, 'views')); 设置了模版文件夹的路径；主要清楚__dirname的意思就可以了，它是node.js中的全局变量，表示取当前执行文件的路径 app.set('view engine', 'ejs'); 设置使用的模版引擎，我们使用的ejs 2.app.use([path], function) 用这个方法来使用中间件，因为express依赖于connect，有大量的中间件，可以通过app.use来使用；path参数可以不填，默认为'/' (项目中用到的就不分别解释了，用到的时候自已查一API的中间件部分) app.use(express.static(path.join(__dirname, 'public'))); 这一句中可能要注意一下，express.static( )是处理静态请求的，设置了public文件，public下所有文件都会以静态资料文件形式返回（如样式、脚本、图片素材等文件） var routes = require('./routes/index');var users = require('./routes/users');app.use('/', routes);app.use('/users', users); 上面代码表示当用户使用/访问时，调用routes，即routes目录下的index.js文件，其中.js后缀省略，用/users访问时，调用routes目录下users.js文件 3.app.get(name) 获取名为name的项的值 if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.messag }); });} 表示如果是开发环境，处理error时会输出堆栈信息 -
在javascript中, false, null, 0, "", undefined 和 NaN 都是false值.
-
关于动画的性能优化，可以参考几个内容
总的指导文章： http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ 这是 uc 一个项目的优化文章 https://xinranliu.me/2015-05-22-qiqu-performance/ 加上youtube 上 chrome developer 的 supercharged 开头几个将性能优化的例子 加起来看，基本就入门了 -
JavaScript
JavaScript Promise迷你书 http://liubin.org/promises-book/#ch2-promise-all ES6-Promise (subset of rsvp.js) https://github.com/stefanpenner/es6-promise/blob/master/README.md https://github.com/onestraw/ebook 电子书 -
动画的执行速度
http://cubic-bezier.com/ 贝塞尔曲线 （动画的执行速度） http://yisibl.github.io/cubic-bezier/ -
淘宝 已使用 （检测浏览器 对ie）技术图谱
webp http://isux.tencent.com/introduction-of-webp.html#comment-form -
gulp安装
https://segmentfault.com/a/1190000000372547 gulp安装 -
uc移动端调试
http://plus.uc.cn/document/webapp/doc5.html -
前端知识点收集（一般够用）
http://www.tuicool.com/articles/F7JrMjj https://cnodejs.org/topic/56ef3edd532839c33a99d00e -
MV*框架
-
web端的自适应 rem css pixel与device pixels （device-width viewport DevicePixelRadio）
-
百度地图API http://lbsyun.baidu.com/index.php?title=webcomponent
-
node之ueditor编辑器 http://www.cnblogs.com/Chen-xy/p/4466425.html
-
-
单例模式（Singleton Pattern）
-
桥接模式（Bridge Pattern）
-
组合模式（Composite Pattern）
-
外观模式（Facade Pattern）
-
适配器模式（Adapter Pattern）
-
装饰者模式（Decorator Pattern）
-
工厂模式（一）（Factory Pattern Part 1）
-
工厂模式（二）（Factory Pattern Part 2）
-
代理模式（Proxy Pattern）
-
观察者模式（Observer Pattern）
-
命令模式（Command Pattern）
-
责任链模式（Chain of Responsibility Pattern）
-
模拟器（电脑）
- 安卓 ：夜神模拟器，BlueStacks
- 苹果： iPadian
-
图表插件库
-
http://echarts.baidu.com/ echarts
-
http://www.highcharts.com/ highcharts
-
-
集成测试相关文章
-
翻墙
-
lantern （蓝灯）
-
申请试用一天
-
UltraSurf Security, Privacy & Unblock VPN
-
Shadowsocks
-
谷歌翻墙插件
-
-
教程 测试
-
云测试
-
阿里前端测试 （主要针对页面死链接、浏览器截图。。。。没有多大的实用性）
-
app chrome 调试
- 模拟器(BlueStacks、夜神、海马)+真实手机
-
插件编写 chrome
-
前端学习方向
- http://www.w3school.com.cn/js/pro_js_object_defining.asp
- http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html
- http://www.cnblogs.com/TomXu/tag/JavaScript/
- 《JavaScript面向对象编程指南（第2版）》
- 《JavaScript设计模式与开发实践》
- https://www.zhihu.com/question/22146521
-
常用页面效果demo http://web.jobbole.com/88005/
-
原生与h5的交互
-
前端资料新手手册
-
微信小程序
-
设计师常用素材链接
- 千库网，一个免费下载图片素材的网站 http://588ku.com/
- Unsplash分享免费高质量照片的网站，照片分辨率都挺大，而且都是真实的摄影师作品，图片多是风和静物 https://unsplash.com/
- 有字库，一个免下载字体，直接在线引用字体的网站 http://www.youziku.com/onlinefont/index
-
前端工程师必备实用网站
-
es6 学习
-
学习要点：箭头函数,类,import, const, let
-
vuex 的测试。。
-
window7常用快捷键
-
window环境下安装多个版本的node管理工具nvmw http://www.jianshu.com/p/82c5f3a39559
-
range slider 组件可通过拖动的方式来设置一个给定范围内的数值 https://refreshless.com/nouislider/behaviour-option/
-
vscode 一些推荐的插件~~
-
设计稿px与rem之间的转换 http://www.jianshu.com/p/b00cd3506782
-
前端缓存技术 渐进式网页应用 Progress Web App
-
利用视口实现适配（移动端）
-
改npm镜像了 消灭那些老是半路卡住你的npm install吧 下面是命令行命令 自己按需set
# node-gyp 编译依赖的 node 源码镜像 $ npm set disturl https://npm.taobao.org/dist # chromedriver 二进制包镜像 $ npm set chromedriver_cdnurl http://cdn.npm.taobao.org/dist/chromedriver # operadriver 二进制包镜像 $ npm set operadriver_cdnurl http://cdn.npm.taobao.org/dist/operadriver # phantomjs 二进制包镜像 $ npm set phantomjs_cdnurl http://cdn.npm.taobao.org/dist/phantomjs # fsevents 二进制包 $ npm set fse_binary_host_mirror https://npm.taobao.org/mirrors/fsevents # node-sass 二进制包镜像 $ npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass # electron 二进制包镜像 $ npm set electron_mirror http://cdn.npm.taobao.org/dist/electron/ -
npm切换依赖安装源
-
vr 全景
-
2017 前端面试知识点整理
- 整理的面挺全的：https://segmentfault.com/a/1190000011091907
- 腾讯校招面试题 https://juejin.im/post/59c907d46fb9a00a4746e2db
- es6 面试题 https://juejin.im/post/59c8aec0f265da065c5e965e
- 深入理解 js this 绑定 https://segmentfault.com/a/1190000011194676
- 知识点探讨 https://github.com/xufei/blog/issues
- 前端资料群集 https://github.com/nicejade/Front-end-tutorial
- 饿了么前端面试 https://elemefe.github.io/node-interview/#/sections/zh-cn/
- 2017年前端面试题整理汇总100题 http://blog.csdn.net/kebi007/article/details/54882425#comments
- 前端常用导航
-
Angular4
-
前端常用网站
-
js解读
- js是单线程的， 所有任务都是需要排队，前一个任务结束，才会去执行后一个任务。如果前一个任务耗时申城，后一个任务不得不一直等待着
- js运行在浏览器中，浏览器的内核是多线程，常驻线程至少许要三个线程
- javascript引擎线程：基于事件驱动单线程执行，js引擎一直等待队列中任务的到来，然后加以处理，浏览器无论何时只有一个js线程在运行js程序。
- GUI渲染线程：渲染浏览器界面，当界面需要重回（Repaint）或由于某种操作引发回流（reflow）时，该线程就会执行。注意：GUI渲染线程与引擎是互斥的，当js引擎在执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到js引擎空闲时立即被执行。
- 浏览器事件触发线程：当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待js引擎的处理。这些事件可来自Javascript引擎档当前执行的代码块setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，由于JS的单线程关系所有这些事件都等待JS引擎处理（当线程中没有执行任何同步代码的前提下才会执行异步代码）
- 任务队列
- 同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才会执行后一个任务
- 异步任务：不进入主线程、而进入任务队列，只有‘任务队列’通知主线程，某个一部任务可以执行了，该任务才会进入主线程
-
前端学习手册 https://frontendmasters.com/books/front-end-handbook/2018/
- api，ajax请求
- 系统环境变量处理
- 路由跳转
- 历史记录：component页面缓存处理
- 模拟app页面切换转场：交互动效
- 使用rem自适应页面
- styule预编译样式工具
- 按需加载（https://segmentfault.com/a/1190000011519350）
- 权限设置：根据用户权限，动态添加路由， 借助，router.addRoutes(addRoutesArray)