vim 基础

怎样在多屏幕中移动dock: 把鼠标移动到想要放置dock桌面的最下方,dock就会移动到该桌面

在做一些页面时,可能要求页面内容根据页面宽度自动调整文字大小。例如某元素p字体大小在屏幕宽度320px时为14px,其他宽度自动等比例缩放。
开始之前,需要了解一些单位

方案1: rem + 媒体选择

使用媒体选择,根据浏览器分辨率不同自动设置根节点的字体大小(间隔40px)

1
2
3
4
5
6
7
8
html { font-size: 10px; }
@media screen and (min-width:360){html{font-size: 11.25px;}} /* 360/320*10**/
@media screen and (min-width:400){html{font-size: 400/320 * 10px;}}
……
@media screen and (min-width:960){html{font-size: 960/320 * 10px;}}
/**具体元素的高度通过rem指定*/
p{font-size: 1.4rem;}

可以通过less或者css简化媒体选择部分

1
2
3
4
5
6
7
.loop(@width) when (@width > 320) {
.loop(@width - 40);
@media screen and (min-width: @width) {
html { font-size: @width/320*10px }
}
}
.loop(960);

方案2: rem + js

1
2
// 设置html的fontsize(未考虑兼容性)之后,内容元素同方案1使用rem指定大小
document.body.parentNode.style.fontSize = document.body.clientWidth/320 * 10 + 'px';

方案3: 使用vm单位

1vm代表宽度的1%,假如给元素指定fontsize的单位是vm时,页面宽度320px时,1vm代表3.2px,640px时代表6.4px,元素内容的字体大小就会自动改变;

1
p { font-size: 14/3.2vm}

方案4: 使用calc(注意:该方案不可行)

css3增加了calc属性,例如

1
div{ width: calc(100%-50px) }

那么是否可以通过calc根据页面宽度计算根节点字体大小呢?calc中模仿方案1,可得如下代码

1
html{font-size: calc(100% / 320 * 10 px)} /**错误*/

到底可以不可以呢?经测试,该方法行不动!!!至少上面的写法不可行!
为什么呢?100%页面宽度 / 320 * 10就是具体要的字体大小啊?
为什么呢?

答案: font-size的calc的100%不是代表元素宽度的,而是代表字体大小!!!!!就像font-size:100% 一样;

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