一直觉得不管使用哪种开发工具,深入研究这个工具都是很值得的,这个投入产出比,性价比等都很高。
俺们公司那群人好像一直都没发现这个问题。依旧使用那几个“常用”的快捷键,手动处理很多很多完全可以托付给机器来完成的东西。
我觉得吧,当你决定使用一款IDE时候,至少把整个程序里的所有菜单按钮过一遍,然后揪出快捷键表打印出来背一背吧。
我们公司大多数人使用 Myeclipse 作为 IDE, 但好像他们很多人连怎么添加插件,怎么设置文件保存后自动格式化代码,自动优化imports,自动添加注释等最基本的功能都不知道,更别说怎么进行性能调优了。(我这不使用Myeclipse的人都知道。。) 这样的话在这公司用这么些早该淘汰的电脑做开发的话还真是有点忧伤呐。
好,打住。
因为我基本都是写前端代码,所以使用了对前端比较友好的Intellij IDEA,也稍的学习了些功能。
这里介绍了高级功能 external tools,就是可以调用外部工具。
其实也没什么可说的,就是和你说有这么个功能,可以调用外部程序,比如调用 nodejs 执行 grunt 命令,可以更具情况设置参数,并在工具栏等地方生成对应的图标,想执行命令的时候点击一下就可以了。比如yuicompresser什么的都能通过这个方式集成进来。十分方便啊。
当然要是什么时候 IDEA 也能像原生支持 ant,maven 等支持 grunt 那就好了。
作者归档:wenbin
使用 gzip 压缩 js, css 等静态文件,优化网页加载速度
一般情况下,开发一个项目,部署上线前需要对css,js等文件进行压缩合并。这样可以使文件大小变小很多,用户就能更快地获取到文件,加快网页加载速度。
其实除了使用yuicompresser等合并压缩外,还有一个很凶残的东西,gzip。这是 GUN zip 的缩写,通过这个压缩往往能使文件减少40%以上。当然这不绝对,有些情况使文件变大也是有可能的,这另行讨论。
那怎么使用 gzip 呢?一般有3种方式:
1.通过apache等静态服务器提供的功能,只要通过修改服务器配置文件里的设置就可以开启 gzip 压缩。
2.通过jboss,tomcat,php等容器来开启gzip压缩,方法也是修改配置文件啦。
3.通过一些压缩工具直接对文件进行 gzip 压缩。
前两种方式都是在用户访问网站发起请求时,服务器动态地对请求的文件进行压缩,每次请求都会这样重新压缩,非常消耗cpu处理时间,虽然可以进行缓存。
但按照众所周知的预处理原理,我们最好还是提前将文件压缩好。就像less等能预编的绝对不要放到客户端去处理啊。
所以还是推荐第三种方式。这样用户请求 css js 时就能直接返回 gzip 压缩好的文件,当然写点代码设置请求头为 Content-Encoding:gzip 什么的也是必要的。
大多数情况下只要开启对 html(包括动态生成的页面), css 和 js 的压缩就可以了,因为想 jps, png, pdf 等二进制文件 gzip 基本是不起作用的,反倒压缩需要消耗很多的cpu,得不偿失。
再说说前面提到的gzip压缩可能会使文件变大的问题。其实这个问题也不用怎么考虑,知道下原理就可以了。我们知道 gzip 压缩是根据文件内容的冗余度来处理的,当一个文件内存在很多相似的代码片段或者字符串的话就能得到很好的压缩,而文件内容很少重复的话,压缩可能就没什么效果。
基于这点里有,我们写代码的时候就要注意一些问题,比如引入css文件的写法:
注意几个属性书写的前后位置顺序提交冗余度,这样可以得到更好的压缩率,同样其他多属性的标签也应该保持这种书写的一致性,如input等。有兴趣的可以看看下面google的参考链接,里面做了点介绍,当然要想深入的话RTFM
以上提到的具体的配置方法和 gzip 算法等内容参阅相关文档哈。
写这篇文章主要是因为前些日子给一个网站做性能调优,发现坑爹的根本没有开启 gzip 压缩,有点郁闷,我嚼得好歹 gzip 应该是标配吧。因为也没有什么服务器控制的权限,所以报告了项目经理,让他处理处理,但是没想到啊,办公室里的两个项目经理都说不知道 gzip 这东西,都说之前没听说过。。
纳尼,这不是计算机网络课程里最基本的东西咩。结果一问办公室里的其他人,没有一个人知道。。
好吧不纠结有没有人知道这问题了。
reference:
https://developers.google.com/speed/articles/gzip
http://badqiu.iteye.com/blog/37176
http://laodaobazi.iteye.com/blog/1404694
http://www.hiadmin.org/blog-seo/wordpress-gzip-css-js
http://www.dboy365.com/archives/707
hexo, A fast, simple & powerful blog framework, powered by Node.js.
this post was written a few mouth ago. And for some reason, my idea had changed.
if you are a geeker, and you use github, you must have know github pages, and something like Jekyll or Octopress.
I tried Octopress last year, and find it quite complex to use. As someone in V2EX said, Octopress is for someone called "SBC", i do think so (but Octopress’s default theme is more beautiful).
then i tried several other static website generator, like nico, hexo etc. i found that hexo quite easy to use, the properity of written in nodejs is friendly to frontend developers.
reference:
http://zespia.tw/hexo/
svn的关键词替换
公司里这些东西都没什么人研究,svn很是纯粹的作为了代码的插入抽出工具,一点快感都没有。
最近看某书里提到workflow相关东西,也提到svn的一些高级功能,那就多作一些了解吧。
通过svn可以给提交的文件动态地添加一些信息,比如文件最后的修改时间,文件的版本号,作者等。
1.通过命令行执行命令,具体查看命令: svn help propset
2.直接通过修改svn的配置文件,开启关键字功能enable-auto-props = yes
(OSX下配置文件在~/.subversion)
3.还有就是通过GUI工具设置,平时使用IDEA,自带了svn工具,可以直接在IDE里更新提交代码。当然也可以设置这些关键词了。
喜欢命令行的话可以用第一种方式,8过我还是推荐GUI,比较直观快捷。
第二种方法没试过,猜测是无法将配置同步到svn上的,这就就没法在干净的系统里checkout代码准备构建项目时就能实现关键词替换功能,还要去修改配置文件,虽然可以通过构建脚本完成但是赶脚不好。svn提供了同步这样的配置到服务器的功能别浪费了。
关键词替换的功能除了能节省点自己添加注释,保持注释一致等常规用途外,还可以为css,js等会被浏览器缓存的文件添加版本信息,以便在版本更新的时候浏览器能马上读取最新的文件。具体方法大家自己研究吧,没什么难度。
还有一些注释格式等具体的细节请参考文档,这文章只是抛砖引玉一下。
参考链接:
http://svnbook.red-bean.com/en/1.4/svn.advanced.props.special.keywords.html
http://subversion.apache.org/faq.zh.html
Mac系统美化
Mac的Dashboard,Mission Control和登录界面背景图看多了视觉疲劳,可以自己手动换换,
用相同大小格式的图片替换掉系统里对应的图片就可以了,这几个图片位置如下:
替换前注意一定要备份啊。
登录界面的背景大图applelinen.png,及Retail屏幕的applelinen@2x.png
/System/Library/PrivateFrameworks/LoginUIKit.framework/Versions/A/Frameworks/LoginUICore.framework/Versions/A/Resources/
登录界面背景图上几个按钮需要自己手动画上去,注意位置别画偏了就好
Dashboard背景文件位置pirelli.png,缩略图mini_pirelli.png,及Retail屏幕的pirelli@2x.png
/System/Library/CoreServices/Dock.app/Contents/Resources/
// 我一般将Dashboard设为鼠标触碰屏幕左下角时显示,这样就木有背景图,变成半透明的蒙版了。
Mission Control的背景图片defaultdesktop.png
/System/Library/CoreServices/Dock.app/Contents/Resources/
替换后执行killall Dock命令就可以。
mysql sql语句别名不生效
sql语句用到了别名,在oracle、db2,sqlservice数据库中正常,在mysql中不正常
因为在mysql下的useOldAliasMetadataBehavior默认为false,字段别名默认不生效,配置文件里将其改为true就可以了。
jdbc:mysql://127.0.0.1:3306/DATABASE?characterEncoding=utf-8&useOldAliasMetadataBehavior=true
参考链接:
http://dev.mysql.com/doc/refman/5.0/en/connector-j-reference-configuration-properties.html
拔掉耳机后自动暂停iTunes音乐的插件:Breakaway
mac os 上php连接mysql数据库不能使用使用localhost问题
尼玛,踩到坑了,蛋疼。浪费了半个小时
在mac上搭了php的环境后连不上数据库,数据库正常,通过命令行工具也能正常访问。
查了下。。。才发现是localhost的写法不行:
当把localhost换成127.0.0.1或者本机的IP时,居然正常了。以前一直认为localhost与127.0.0.1是一回事,现在事实证明它们其中还是有区别的。
在网上搜索了一下它们的区别,有人已经说的很明白了,具体可以参看:http://blog.sina.com.cn/s/blog_40e1ba640100ivjj.html,http://www.diybl.com/course/7_databases/mysql/myxl/20090722/168062.html。它们的主要区别是localhost是通过socket方式来连接,而127.0.0.1则是走的TCP协议。
上面提到区别就是导致mac下无法连接数据库的原因。那为什么socket方式无法连接呢?由于mac os lion上已经自带了apache和php,我的环境使用就使用默认的,mysql服务是在官网下载dmg安装最近版本,php的配置文件(/ect/php.ini)中设置有三个地方(mysql.default_socket、mysqli.default_socket、pdo_mysql.default_socket)设置了mysql socket文件存放的位置,其默认值为/var/mysql/mysql.sock。查看mysql服务使用的socket文件有两种方式
方法1:
echo "show variables" | mysql | grep "socket"
方法二:
echo "status" | mysql | grep "socket"
注意:如果mysql设置了密码,使用-u,-p来指定用户名和密码
这里看到mysql的socket文件存放位置为/tmp/mysql.sock。
看到这儿应该知道问题所在了吧,使用localhost连接失败的原因为在socket的方式下,php默认配置的mysql服务的socket文件不存在,所以导致连接失败,如果把连接失败的错误信息dump出来,你应该会看到错误信息中包含了“No such file or directory”。
知道原因就容易修改了,只需要把php配置文件中mysql.default_socket、mysqli.default_socket、pdo_mysql.default_socket这三项值修改为mysql服务配置对应值即可,修改好后需要重启apache服务。当然也可以修改mysql配置文件中的socket信息,使其保持一致即可,修改好后重启mysql服务。
使用text-shadow 属性的时候注意点
text-shadow这样的css 属性已经很常用了,但是使用这个属性的时候有一点常常被人忽略的事情。
就是使用text-shadow 后文字反选的时候也会显示阴影,这时很阴影很容易和反选的字体颜色冲突,影响视觉效果。
推荐如果使用了text-shadow 的时候在::selection 中把阴影去掉
::selection {
text-shadow: 0px 0px #fff;
}
或者更具情况给阴影和字体重新配置颜色。
[译]roots where it all begins
今天干什么来着,偶然看到一个静态网站项目生成器,给大家介绍一下。
roots 是一个用来创建简洁、漂亮、高效的互联网产品的工具盒。
概要
Roots是一个工具箱,是网站前端开发的一种最佳实践。它有去多的特性,我会试着把这些特性列在下面供乃们参考。
默认情况下Roots是一个静态网站生成器,但是它也含有模板和各种插件用来方便地和express.js、rails等集成。当然也少不了RailwayJS和Sinatra的插件。
- 非常简单的安装方法
- 干净和最小化的默认项目模板
- 默认使用jade, stylus, coffeescript
- 非常快的实时编译执行速度
- 不会破坏工作流的,漂亮的编译错误提示
- 内置稳定的、模块化的、强大的css帮助库
- 干净直观的应用配置文件
- 部署的时候智能压缩html, css 和js 代码
- 通过tower 和require.js 高效地管理客户端js 脚本
- 有简单完整的插件文档,方便对应用进行扩展
上面的描述比较模糊,下面提供几个快速教程视频来展示下上面的特性。视频不多,之后我还会添加更多的视频。
刚放出来的视频比较少,先说声对不起。
安装
安装非常简单,只依赖于node.js,而node.js有一个维护地很好的安装器。如果你想用稍微快一点的方式安装,可以直接在命令行里执行curl roots.cx/get |sh 命令。或者你可以直接用npm 命令安装 npm install roots -g
命令
安装好后,roots提供了几个有用的命令用来建立项目。在使用toots之前你至少先要熟悉一下这些命令。
$roots new name - 在当前目录建立名为name 的项目
$roots compile - 把项目编译压缩到public 文件夹
$roots watch - 开启一个本地服务,用来编译项目,并监听文件改动
$roots update - 更新roots
$roots js - wrapper for bower (这怎么翻译-_-!!!)
如果你忘了上面的命令或者需要其版主,输入roots help 来显示可用命令
客户端 js
在客户端使用js类库的话十分方便,但是为每个项目下载这些库,并保持更新是件令人头疼的事。幸好牛逼的twitter的工程师开发了bower来解决这些问题。在roots项目中,你可以直接通过执行roots install 后面跟包名来把这些库安装进js/components 文件夹。还可以试试下面的命令:
roots js list - 列出已安装的包
roots js search name - 查找名为name 的包
roots js update name - 更新名为name 的包到最新版
roots js uninstall name - 删除名为name 的包
roots js info name - 获取名为name 的包的描述信息
bower 里有很多很棒的开源包,可以点这里查看。另外require 默认被添加进新项目,用来方便管理客户端js 的加载。
插件
Roots 提供了几个针速度和工作效率优化过的核心编译器。但是每个人都有自己喜欢的工具,如果你想用其他的开发语言,你可以通过插件接口来实现。
只要一个js 文件就能构成插件,而且一般这个文件小于10行代码(很多编译器都是这样的)。要创建插件的话,在/plugins 文件夹下创建一个js 或者coffeescript 文件。这个模块只要提供两个方法,setting和compile. 为了方便起见,你可以直接执行 roots plugin generate 命令,它会自动帮你创建插件所需要的的基础模板文件。
西面有几个插件的列子,注意插件是在roots 的环境下执行的,如果你需要依赖其他文件,用module.require() 代替require(), 不然roots 会检索不到那些依赖的文件。
sass compiler
ejs compiler
stylus compiler
你可能会注意到有一个叫Helper 的类完成了很多工作。 这个类管理了一些重要的路径和文件信息,它使让我盟能简单方便地管理编译器。下面是Helper 类的文档。
好吧,文档和faq就不翻译了。
同学们有兴趣的话可以自行查阅:
http://roots.cx/