how to be a programmer 程序员成长之路

  • 调试技术中分治的关键和算法设计里的分治是一样的。你只要从中间开始划分,就不用划分太多次,并且能快速地调试。但问题的中点在哪里?这就是真正需要创造力和经验的地方了。
  • 百分之90的时间花在了百分之10的代码上
  • 如果你努力工作,却在你额外工作的时间里获得了很少东西,这是很愚蠢的

javascript内存泄漏查看

  • chrome profile
  • 查看时选择多个时间点的相对关系

webstorm 配置

  • 在preferences中配置全局soft wrap,在edit中配置临时
  • 配置快捷键common+wheel修改字体大小

理解正则零宽的含义

正则中所谓的零宽断言,类似于锚点字符,它们匹配指定的位置而不会匹配内容,如 ^ 匹配开头,$ 匹配结尾,\b 匹配单词边界;(?=p) 匹配「接下来的字符与 p 匹配」的位置,(?!p) 匹配「接下来的字符不与 p 匹配」的位置。\b 字符匹配单词边界,实际上就是匹配 \w 与 \W 之间的位置(\w 匹配 [a-zA-Z0-9])。很少会有人用到 \B,它匹配的是非单词边界位置,简单理解就是 \w & \w 之间位置或者 \W & \W 之间位置。

canvas使用注意

  • 中的width只能是数值,不能是百分比,符号%不起作用
  • 通过style设置宽度和高度后,canvas绘制的内容会等比例缩放

mac修改快捷键

  • 系统偏好设置➡键盘➡键盘快捷键➡应用程序快捷键,点下面的+号
  • 选择应用程序,输入菜单名称,输入快捷键,保存即可

charles 本地映射

  • 在structure中对应目录右键,选择map local,输入规则即可
  • 取消和管理: 菜单Tools-> Map local

zip压缩命令

  • zip <将要生成的压缩包名> <需要压缩的文件>
  • zip -r <将要生成的压缩包名> <需要压缩的目录路径> -x <忽略文件>

自动化工具 automator制作批量修改图片格式

css calc

  • width: (100% - 40px);
  • font-size: (100% + 2px); font-size中100%代表默认高度

修改文件权限 chmod 777 filepath

express在发送文件前修改文件,方法使用中间件修改res.write函数

1
2
3
4
5
6
7
8
9
10
11
12
app.use(function (req, res, next) {
var write = res.write;
res.write = function (chunk) {
if (~res.getHeader('Content-Type').indexOf('text/html')) {
chunk instanceof Buffer && (chunk = chunk.toString());
chunk = chunk.replace(/(<\/body>)/, "<script>alert('hi')</script>\n\n$1");
res.setHeader('Content-Length', chunk.length);
}
write.apply(this, arguments);
};
next();
});

react error

1
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

原因: 项目文件夹需要安装react,并且引用react时注意大小写,引入react时对大小写敏感,否则会加载多个版本的react

react dom class属性要使用className替换掉

git文件太大或者太多上传失败

  • git config –global http.postBuffer 999999999

charles使用时问题

jquery $(dom).closest(selector) 沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。包括当前元素

输入法回车问题

express.listen之后还能增加app.use或者app.get吗?

去除safari浏览器的默认样式 -webkit-appearance: none;

mac查看端口占用情况 lsof -i tcp:port

upload.py执行失败

upload.py报错“upload review does not support the current workspace version control system”如何解决?

npm 显示ip地址插件, ip.address()

按格式输出json内容

JSON.stringify(obj,null,4);

express.static的其他参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var app = new express();
app.use('/test/', express.static('/test/'));
app.use('/test/',express.static({
dotfiles:'ignore', // 点文件
etag: true, // 是否发送etag标签
extensions:false, // ['html','htm'] 自动增加扩展名
fallthrough: true, // 错误时处理
index: 'index.html', // 默认文件
lastModifed: true, //
maxAge: 0, //
redirect: true, //当是目录时,自动增加“/”
setHeaders: function(res,path,stat){}
}));

console输出彩色文字

console.log(“%c%s”,”color: red; background: yellow; font-size: 24px;”,”警告!”);
在node中输出可以使用库colors

事件代理 delegate 不仅可以代理点击事件,mouseenter和mouseleave,mousemove等事件都可以代理

javascript window.postMessage

时区bug,不同浏览器默认时区不一致,开发使用事件时最好加上时间时区

react学习

  • react数组解析
    1
    2
    3
    {this.state.arr.map(({prop1,prop2}) => (
    <div>{prop1} and {prop2}</div>
    ))}

多个ssh key同时使用

shell 打开finder

  • open .

mac显示桌面

  • F11
  • Command + F3
  • Trackpad 上 五指散开
  • 如果有多个桌面,四指滑动到空白的桌面即可
  • 配置触角 (偏好设置 Mission Control」里可以设定此功能的「触发角」和键盘快捷键;)

学习fis

  • npm install fis3 -g
  • fis3 -v
  • fis3 release
  • fis3 server
  • fis3.match
  • useHash
  • csssprite
  • watch

使用命令行打开webstrom

菜单 Tools->Create Command Line Lancher..
一般命令格式: wstorm 项目路径

sourceTree用webstrom打开项目

sourceTree偏好设置,自定义操作,目标脚本wstorm 参数$REPO

java项目内搜本地部署

  • 安装jdk1.7
  • 安装mysq
  • 导入数据库
  • 配置Run-Edit Configurations

系统

* 修改数据库密码 src\main\resources\app.properties

提交代码(技巧:先检查再合并)

* 合并代码Terminal
    * cd webapp\neisou\build
    * node r.js -o config.js
* 检查代码,提交到cooder,查看地址cooder.baidu.com
    * cd neisouweb\
    * python ./upload.py -o
* 修改版本号:src/main/webapp/WEB-INF/jsp/include/meta.jsp 修改ver(版本号)以及contextPath(调用代码路径:neisou->ns)的值
* 检查无误后提交到vpn,通过demo.neisou.baidu.com

ie9及以下的mousemove

  • 没有buttons,就是说mousemove时没有办法判定鼠标是否按下

browserify

webpack

react

  • react es6中去除掉了getInitialState,使用constructor代替

事件有自己的生命周期,异步处理后再使用时可能会发生改变

func.bind 生成一个新函数,并且新的函数参数已经固定

1
2

chrome代理插件 SwitchySharp

react调试工具

  • chrome插件可以直接看到节点的结构

fiddle autoresponder

PAC代理配置

使用pac的地方
- 百度代理 内搜搜索代理 http://pac.internal.baidu.com/bdnew.pac
- shadowshocks代理配置
- chrome插件 switchysharp
- fiddle的路由是不是呢?可以测试下看

使用express做代理服务器

PAC代理和express服务器结合制作本地测试

  • mac使用terminal设置pac: networksetup -setautoproxyurl “Wi-Fi” “http://somedomain.com/proxy.pac
  • 获取代理地址: networksetup -getautoproxyurl “WI-FI”

Macbook Pro外接显示器分辨率问题

最字符串最后一个字符 str.slice(-1);

brew

安装nvm

shadowsocks

vim编辑器

mac下配置zsh

  • 将bash切换为zsh: chsh -s /bin/zsh
  • which定位zsh: which zsh
  • 切回bash: chsh -s /bin/bash
  • 下载oh-my-zsh: git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh
  • 备份已有的zshrc(一般不需要) cp ~/.zshrc ~/.zhrc.orig
  • 替换zshrc: cp ~/.oh-my-zsh/templates/zshrc.zhs-template ~/.zshrc

webstrom好处

  • 自动保存
  • 查看文件编辑历史vcs->Local History -> Show History(快捷键:ALT+~ -〉7)

mac 快捷键MAC苹果系统:

查找相关

command + shift + o 根据文件名查找文件
command + f 查找当前文档
command + r 替换当前文档

代码相关

command + d 副本当前行或选中的区块
command + option + t 将代码以某种格式包括起来
command + option + l 将代码格式化
command + shift + u 切换大小写
shift + return 在任意位置换行
shift + F6 高级修改,可快速修改光标所在的标签、变量、函数等

定位相关

option + f1 在左侧文件树中定位到当前打开文件
command + g 跳转到文档的某一行某一列
command + w 选中当前单词、行、区块等
command + y 删除整行
command + [ 移动光标到代码块前
command + ] 移动光标到代码块尾
command + -> 光标移到行尾
command + <- 光标移到行头
option + -> 以单词为单位移动光标
option + <- 以单词为单位移动光标
command + shift + [ 切换到上一个Tab页
command + shift + ] 切换到下一个Tab页

其他

command + + 折叠区块
command + - 展开区块
command + shift + + 折叠所有区块
command + shift + - 展开所有区块
command + p 显示参数信息
command + mouseover 显示主要信息
control + shift + f find in path
control + shift + j 合并行
control + shift + r replace in path
option + delete delete to word start
option + fn + delete delete to word end

快捷键windows平台

查找/代替

  • ctrl+shift+N 通过文件名快速查找工程内的文件(必记)
  • ctrl+shift+alt+N 通过一个字符快速查找位置(必记)
  • ctrl+F 在文件内快速查找代码
  • F3 查找下一个
  • shift+F3 查找上一个
  • ctrl+R 文件内代码替换
  • ctrl+shift+R 指定目录内代码批量替换
  • ctrl+shift+F 指定目录内代码批量查找
  • ctrl+R 文件内代码替换

    界面操作

  • ctrl+shift+A 快速查找并使用编辑器所有功能(必记)
  • alt+[0-9] 快速拆合功能界面模块(分屏)
  • ctrl+shift+F12 最大区域显示代码(会隐藏其他的功能界面模块)
  • alt+shift+F 将当前文件加入收藏夹
  • ctrl+alt+s 打开配置窗口
  • ctrl+tab 切换代码选项卡(还要进行此选择,效率差些)
  • alt+<-或-> 切换代码选项卡
  • ctrl+F4 关闭当前代码选项卡

    代码编辑

  • ctrl+D 复制当前行
  • ctrl+W 选中单词
  • ctrl+<-或-> 以单词作为边界跳光标位置
  • alt+Insert 新建一个文件或其他
  • ctrl+alt+L 格式化代码
  • shift+tab/tab 减少/扩大缩进(可以在代码中减少行缩进)
  • ctrl+Y 删除一行
  • shift+enter 重新开始一行(无论光标在哪个位置)

    导航

  • esc 进入代码编辑区域
  • alt+F1 查找代码在其他界面模块的位置,颇为有用(左侧文件树)(必记)
  • ctrl+G 到指定行的代码
  • ctrl+]/[ 光标到代码块的前面或后面
  • alt+up/down 上一个/下一个方法

    建议配置版本控制快捷键

  • ctrl+C 提交代码
  • ctrl+p 向远程版本库推送更新
  • ctrl+G 到指定行的代码
  • ctrl+]/[ 光标到代码块的前面或后面
  • alt+up/down 上一个/下一个方法