Alan's World

VIM and Sublime Text 2

Alan — Sun, 25 Dec 2011 09:44:14 +0000

一直习惯在 Vim 下写代码，当你习惯并熟悉后，就知道她被称为神器并不为过，不过此文不是来介绍神器的（网上太多了）。这里主要是稍微比较下 Vim 和 Sublime Text 2。之前在 Twitter 上提到过，Vim 的 Taglist 在写 JS 时找函数不好匹配，不怎么方便，于是上个星期试用了一周的 Sublime Text 2，下面说说下感受。

Sublime Text 2 的用起来很流畅，速度很快，安装插件也非常方便，她是一款收费软件，不过可以永久免费试用，在保存的时候偶尔会弹出购买提示。她在安装 Vim 插件后也可以有 Vim 模式，所以像我这样习惯了 Vim 的突然用 Sublime Text 也不会很不习惯，不过不能像 Vim 那么强大就是了，鼠标还是要的。

Sublime Text 打开文件和切换文件相当快， Ctrl+p 在弹出框中输入文件名就可以很快找到，而且还会记住你常编辑的文件，输入过程中会高亮该常用文件，这几点我觉得比 Vim 来得好；打开多个文件，Sublimte Text 会以 Tab 形式显示，这个我还是习惯 Vim 的方式，Vim 下用 tabnew 打开多个文件，快捷切换很方便。

Auto Complete 方面，Sublime Text 比我用 Vim 的 NeocomplCache 稍微快一点；同样装了 Zencoding 插件，我还是习惯 ctrl+y+, 而不是直接 Tab 出来，有时候几个字刚好是 html 标签，她也给我出代码片，太不习惯；不过有一点，Sublime Text 的 Snippet 也可以在 auto complete 中看到，很好啊。

回到刚开始提到的在 JS 中列出所有函数，Sublime Text 直接 ctrl+p 然后输入 @ 就列出来了，很方便很快；不过在 JS 检测上，Vim 用 JSLint 则会方便很多，而且可以直接高亮，Sublime Text 貌似是全部罗列出来，但没高亮，不爽。

平时写代码都是直接 SSH 到开发机上的，Vim 会有优势，不过 Sublime Text 也可以安装 SFTP 插件，把文件下到本地，然后编辑完上传到远程，不是特别方便；还有不爽的是，我在 Ubuntu 下，无法在 Sublime Text 中输入中文，悲催啊！

其他的，Sublime Text 可以在 Sidebar 添加 Project，当然 Vim 也可以用 NerdTree 实现。总的来说，Sublime Text 用惯了也是款很好的编辑器，而且界面也很华丽，编辑器没有最好的，只有用得最习惯的就好，所以我还是回归 Vim 吧，习惯不用鼠标操作啊。

Most Commented

LiveCD 修复 Grub

Alan — Sun, 09 Oct 2011 12:58:42 +0000

上次遇到 grub 出错尝试修复没成功，导致重装 Ubuntu 了，这次不知啥问题又进不了 grub 界面，重装这么蛋疼的事是不想再经历，幸好 google 同学这次让正确答案出现在前面。

我还是用 grub4dos 进入 LiveCD 的（绝对有必要弄一个启动盘了，囧）。首先列出分区 sudo fdisk -l，然后挂载到 / 所在分区，我 ubuntu 是装在移动硬盘，分区在 sdb2：

sudo mount /dev/sdb2 /mnt
//如果有 /boot 分区，假设 /boot 分区在 sdb3，还要：
sudo mount /dev/sdb3 /mnt/boot

然后输入：

sudo mount --bind /dev /mnt/dev

改变目录：sudo chroot /mnt

重建 grub.cfg： update-grub

安装 grub2 到指定硬盘的 MBR

grub-install /dev/sdb (我的移动硬盘为 sdb)

重启可以进入 ubuntu 了：

sudo update-grub2

Windows7 下用 grub4dos 安装 Ubuntu

Alan — Wed, 28 Sep 2011 12:02:19 +0000

用 grub4dos 安装了几次 Ubuntu 了，主要是装到移动硬盘了，感觉很有必要记录一下（以 ubuntu-10.10-desktop-i386 为例）。直奔话题，首先下载 Ubuntu 镜像文件和grub4dos，从 ubuntu 镜像文件提取 initrd.gz、vmlinuz，从 grub4dos 提取 grub.exe、grldr、grldr.mbr，然后和 Ubuntu 镜像文件一起丢到 C:\，再手动创建 menu.lst，加入一下内容：

title Ubuntu10.10
kernel /vmlinuz boot=casper iso-scan/filename=/ubuntu-10.10-desktop-i386.iso locale=zh_CN.UTF-8
initrd /initrd.lz

运行 cmd，输入 bcdedit /create /d "GRUB4DOS" /application bootsector，返回一个 {GUID}，

bcdedit /set {GUID} device partition=C:
bcdedit /set {GUID} path \grldr.mbr
bcdedit /displayorder {GUID} /addlast

重启电脑便可选择 grub4dos 进入 ubuntu liveCD，准备安装前打开终端，输入

sudo umount -l /isodevice

这一命令取消掉对光盘所在驱动器的挂载，否则分区界面找不到分区。然后点击桌面上的安装 Ubuntu 进行安装。安装后可以在 win 下删除刚才放的那些放 C:\ 的文件，然后运行 cmd，删除 bcdedit 产生的启动项（可用 bcdedit /enum 查看）：

bcdedit /delete {GUID} /f

让 Terminal 使用 Solarized 配色

Alan — Mon, 12 Sep 2011 02:56:33 +0000

现在基本用 ubuntu 做开发，直接在终端(gnome-terminal)里面 vim，但配色效果不甚满意，因为 gvim 的配色是 Solarized，google 告诉我 Gnome-Terminal 也可以这样配。可以先围观下效果图：

首先安装 git：sudo apt-get install git-core

然后要设一下 solarized theme for GNU ls，不然在 Terminal 下 ls 啥的都灰蒙蒙的，也不舒服：

git clone git://github.com/seebi/dircolors-solarized.git

dircolor-solarized 有几个配色，你可以去项目那看看说明，我自己用的是 dark256：

cp ~/dircolors-solarized/dircolors.256dark ~/.dircolors
eval 'dircolors .dircolors'

设置 Terminal 支持 256 色，vim .barshrc 并添加 export TERM=xterm-256color，这样 dircolors for GNU ls 算设置完成了。

接下来下载 Solarized 的 Gnome-Terminal 配色：

git clone git://github.com/sigurdga/gnome-terminal-colors-solarized.git

cd gnome-terminal-colors-solarized 到该目录下运行配色脚本：./set_dark.sh 或 ./set_light.sh，这就算搞定了。

这里还有一个修改自 sigurdga 这个 Solarized 配色的，就是背景色跟 solarized 的稍微不一样，项目地址是：https://github.com/coolwanglu/gnome-terminal-colors-solarized

最后，祝大家中秋节快乐！

WordPress Theme: Optimus+

Alan — Sun, 24 Jul 2011 08:19:29 +0000

上次更新 Blog 是 3/22，居然有 4 个月没新文章，有时要写点啥，但是想想又放下了。是现在 SNS 太流行？还是自己太懒？坚持写 Blog 太不容易了，有时也会想写 Blog 到底为了啥，甚至又动了想废掉的念头，但想回来，都存在几年了，就让他这么下去呗，偶尔还能冒下泡，也好吧。

前阵子已经把 aSide 换成 touch5 了，然后在 tumblr 使用 Jamie Bicknell 设计的 Optimus，感觉不错，于是抽空就弄到 WordPress 上来了。

Optimus+ 纯 CSS 简洁型主题，没有用到图片，在 tumblr Optimus 的基础上增加类 google bar；同时主题也没什么功能，仅仅是展示文章与评论，适用于轻博客类型的站点；或者用在 WordPress 上可能有点蛋疼，考虑是否弄个到 Typecho 上；也在考虑是否增加显示最新文章、最新评论等这几个 WordPress 博客常用的展示内容；Optimus+ 是不支持 IE6 的，呼吁使用 IE6 的童鞋升级一下你们的浏览器。Optimus+ 是在 wordpress 3.2 的基础上开发的，所以不知 3.2 以下版本能否使用。

最后，还是那句话，有问题或 Bug 欢迎反馈，Thx! 2011-7-26 更新：Changelog

Optimus+ 演示：Live Demo

Download Optimus+

总结一

Alan — Tue, 22 Mar 2011 15:56:38 +0000

说在前头：博客又几个月没有更新了，之前几年的工作经验废了，现在终于转行页面前端了，没这方面的工作经验，要学习的还有很多，还得稍微适应这行业的氛围、环境，感觉还是不错的。

进入正题，稍微总结下最近工作问题和收获。

一、完全了解页面中的交互组件后再写页面。之前，拿到一个页面的 psd 稿，就是开始写结构，写样式，然后在各个浏览器测试，以求完美的与 psd 稿保持一致，再通知后台同学帮忙进行渲染，经常爆出的问题就是后台同学对于页面中的某些弹窗按钮不知如何渲染，因为我没有写出相应的弹窗代码，刚开始是没经验，没加上去，但这两天做的一个页面也出现同样问题；其实就是在写页面之前没有对交互组件先分析了解，对其该如何实现应该先有个底，然后才开始写页面，这样就可以避免漏写交互组件实现代码的问题，减少一些沟通成本，提高一点工作效率。非常重要的一个步骤！！！

二、养成检验的习惯。以前做 WordPress 主题后一般也会检验一下，但并没有养成习惯，突然记起这事就检验一下，没有检验也就没检验，反正也没多大事；在工作中，由于每次页面完成后，留给自己调试的时间是有限的，我甚至有时赶时间都忘了测试 chrome（其实一般也不会在这个上有太多问题），所以页面完成后，首先应该是对代码进行标准检验，尤其是对 HTML 的检验，检验标准的目的主要是为了看代码中是否有错误的标签或少了闭合标签的情况，有两次我就犯了错误，一个页面写错标签，一个页面少了闭合标签，结果给调试样式带来很大麻烦。所以在完成结构代码后进行 HTML 标准检验，完成样式代码后，进行 CSS 标准检验，这个习惯会给工作带来很大方便。

暂时就这么点吧，有好的经验也欢迎您留言与我分享。PS. 要抽个时间把 aSide 用 HTML5 重构一下，当作对 HTML5 的学习实践。

最近这些日子 (17)

WordPress 主题 aSide 出售

Alan — Sat, 25 Dec 2010 10:53:34 +0000

本来 aSide 是私用的，一些朋友表示要购买，于是抽空整理了一下，现在放出来出售，第一次公开出售主题，希望大家多支持。

aSide 支持 WordPress 3.0+，在各大浏览器上均能正常显示，且外观基本一致。现出售，仅限 15 份，每份 RMB 88 元，~~点此淘宝购买，或联系我购买也行~~。

主题简述：aSide 本来是私用主题，有几位朋友很想要购买，故拿出来出售了。凡购买使用者，请保留页脚作者信息；请勿与他人共享使用，谢谢合作！

主题说明

1. aSide 支持自定义菜单，只支持二级导航栏；支持 Widget，要注意的是，使用 Widget 后，显示效果不能达到某些效果，你可以自己体验下。

上图中就是 Logo 的样式以及二级菜单样式。

2. aSide 已经全面中文化，如不需中文化的，请把 language 文件夹删除即可。

3. 支持嵌套评论，建议最多选 5 层吧。

4. 内嵌回复邮件通知；内嵌文章分页；没有使用评论分页，而是使用 jQuery 判断，当评论超过 36 条时，自动隐藏旧评论，仅显示第 36 条以后的评论内容。

5. 内附 Links 模板，如需建立链接页面，则可使用此模板。

6. 自带“分享栏”。

7. jQuery 点击锚点滚动效果。

8. Lazyload 加载图片。

9. 自动隐藏留言访客资料框。

10. 点击回复自动添加 @someone。

11. 当鼠标指向被回复者 @someone 时，自动获取 someone 用户评论的内容。

12. 相关文章和面包屑导航。

更多细节请看 Live Demo。再次提醒，~~点此淘宝购买，或联系我购买也行~~。

更新：主题已经售完，谢谢！

安装 Ubuntu 10.10 后若干问题

Alan — Sat, 18 Dec 2010 16:23:50 +0000

上次使用 Ubuntu 还是两年前的 8.04 版，这两天忽然又很想用用 Ubuntu，所以装上了 Ubuntu 10.10，用了比较懒的方法，在 Win 下直接 Wubi 安装，省了很多设置的麻烦，过程挺快的，可是装完后问题也多，许多命令都忘干净了，安装适合自己使用的软件，也得折腾一番。于是 Mark 文一篇

网络连接设置

在装软件前得先更新下源，可是刚装完的时候发现上不了网，中间折腾了好久；建议网络设置，要么直接路由设置 DHCP，要么手动设置了 IP 地址、网关等就可以了。
可能有人会出现重启电脑后控制面板上的网络连接面板消失了，或者多了个 ifupdown eth1 连接（原本只有 auto eth0）的问题，我折腾了好久就是这俩问题，其实默认的情况下就没问题，我偏偏改动了 interfaces 和 nm-system-setting.conf 文件。/etc/network/interfaces 默认内容是：

auto lo iface lo inet loopback

而 /etc/NetworkManager/nm-system-setting.conf 默认的 managed=false，网上看到许多说修改 managed=true 解决网络连接面板消失问题，但是修改后就会出现多了 ifupdown eth1 的问题。

字体设置

其实 Ubuntu 10.10 下的字体已经很好了，不过我喜欢安装多一些字体。把想使用的字体放到新文件夹 myfonts，然后复制或直接移动到 /usr/share/fonts/ 下：

复制：sudo cp -r myfonts /usr/share/fonts/
或直接移动：sudo mv myfonts /usr/share/fonts/

然后修改下字体权限：

sudo chmod u+rwx /usr/share/fonts/myfonts/*

然后到 myfonts 目录：

cd /usr/share/fonts/myfonts/

建立字体缓存：

sudo mkfontscale sudo mkfontdir sudo fc-cache -fv

声音爆音问题

Ubuntu 似乎一直都有这个问题，声音放大些就会有爆音，网上搜索到，尝试修改了下 alsa-base.conf 文件：

sudo gedit /etc/modprobe.d/alsa-base.conf

看看有没有 options snd-hda-intel power_save=10 这一行，有就在前面加个 # 号，没有就在最后追加这一行，即 options snd-hda-intel power_save=10。我是没有找到，追加上去的，真的效果好多了，试用播放器听音乐也没问题。或者你也可以安装 Jackd，来提高音质（听说效果很明显，有质的飞跃）：

sudo apt-get install jackd sudo apt-get install caps

E: Sub-process /usr/bin/dpkg returned an error code (1)

这个 Error 真的很让人头疼，google 后的结果大多都是移动 info，结果其他问题接踵而至，最后在个国外论坛看到解决办法，到 /var/lib/dpkg/info 文件夹下，删除出错的相关文件，然后再到 /var/cache/apt/archives 文件夹下删除出错的相关文件，再重新安装软件就行了。

最后是 Ubuntu 10.10 的一些更新源

台湾源：
deb http://tw.archive.ubuntu.com/ubuntu/ maverick main universe restricted multiverse deb-src http://tw.archive.ubuntu.com/ubuntu/ maverick main universe restricted multiverse deb http://tw.archive.ubuntu.com/ubuntu/ maverick-security universe main multiverse restricted deb-src http://tw.archive.ubuntu.com/ubuntu/ maverick-security universe main multiverse restricted deb http://tw.archive.ubuntu.com/ubuntu/ maverick-updates universe main multiverse restricted deb-src http://tw.archive.ubuntu.com/ubuntu/ maverick-updates universe main multiverse restricted

电子科技大学的源：
deb http://extras.ubuntu.com/ubuntu maverick main deb-src http://extras.ubuntu.com/ubuntu maverick main deb http://ubuntu.uestc.edu.cn/ubuntu/ maverick main restricted universe multiverse deb http://ubuntu.uestc.edu.cn/ubuntu/ maverick-backports restricted universe multiverse deb http://ubuntu.uestc.edu.cn/ubuntu/ maverick-proposed main restricted universe multiverse deb http://ubuntu.uestc.edu.cn/ubuntu/ maverick-security main restricted universe multiverse deb http://ubuntu.uestc.edu.cn/ubuntu/ maverick-updates main restricted universe multiverse deb-src http://ubuntu.uestc.edu.cn/ubuntu/ maverick main restricted universe multiverse deb-src http://ubuntu.uestc.edu.cn/ubuntu/ maverick-backports main restricted universe multiverse deb-src http://ubuntu.uestc.edu.cn/ubuntu/ maverick-proposed main restricted universe multiverse deb-src http://ubuntu.uestc.edu.cn/ubuntu/ maverick-security main restricted universe multiverse deb-src http://ubuntu.uestc.edu.cn/ubuntu/ maverick-updates main restricted universe multiverse

LUPA 开源社区的源：
deb http://mirror.lupaworld.com/ubuntu/ maverick main restricted deb-src http://mirror.lupaworld.com/ubuntu/ maverick main restricted deb http://mirror.lupaworld.com/ubuntu/ maverick-updates main restricted deb-src http://mirror.lupaworld.com/ubuntu/ maverick-updates main restricted deb http://mirror.lupaworld.com/ubuntu/ maverick universe deb-src http://mirror.lupaworld.com/ubuntu/ maverick universe deb http://mirror.lupaworld.com/ubuntu/ maverick-updates universe deb-src http://mirror.lupaworld.com/ubuntu/ maverick-updates universe deb http://mirror.lupaworld.com/ubuntu/ maverick multiverse deb-src http://mirror.lupaworld.com/ubuntu/ maverick multiverse deb http://mirror.lupaworld.com/ubuntu/ maverick-updates multiverse deb-src http://mirror.lupaworld.com/ubuntu/ maverick-updates multiverse deb http://extras.ubuntu.com/ubuntu maverick main deb-src http://extras.ubuntu.com/ubuntu maverick main deb http://mirror.lupaworld.com/ubuntu/ maverick-security main restricted deb-src http://mirror.lupaworld.com/ubuntu/ maverick-security main restricted deb http://mirror.lupaworld.com/ubuntu/ maverick-security universe deb-src http://mirror.lupaworld.com/ubuntu/ maverick-security universe deb http://mirror.lupaworld.com/ubuntu/ maverick-security multiverse deb-src http://mirror.lupaworld.com/ubuntu/ maverick-security multiverse

CSS 气泡对话框

Alan — Sun, 05 Dec 2010 00:06:49 +0000

气泡对话框一般用于 tooltip 提示框，或者评论留言的对话框等，在页面设计中经常可以看到。通常是用制作图片然后分割应用背景于元素上来实现，如果是圆角气泡对话框的话可能需要应用于更多元素上，显得非常麻烦，图片也会增加 HTTP Requests，用 CSS 的 :before 或 :after 伪类实现气泡对话框会省事很多，不过 IE6 和 IE7 不支持该伪类。

先看看 Demo，我们其实可以把气泡对话框看出是箭头加主题内容框组成的，在 CSS 的实现上也正是如此，我们先设定内容框的背景和圆角，然后再通过 :before 或 :after 设置箭头方向即可。先以第二个例子（相对简单）来说：

主体提示内容的样式：

.tooltip {
background: black;
display: inline-block;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
padding:0px 15px 10px;
}

设置实现箭头指向：

.tooltip:before {
content: "";
width: 0;
height: 0;
font-size: 0;
position: relative; /* 定位，也可以使用 absolute，看具体定位需求 */
border: 10px solid transparent; /* 箭头大小 */
border-bottom-color: black; /* 箭头颜色 */
border-top: 0; /* 箭头指向相对应的 border 为 0 */
overflow: hidden;
top: -10px;
display: block;
}

如果箭头居中显示的话，可以增加 margin: 0 auto。对于 border，当箭头指向上方，那么我们就要设定 border-bottom 的颜色，并且把指向的 border-top 设置为 0，其他方向依此类推，具体可以参考第三个例子，是关于箭头的方向设置的；对于 display: block，在水平方向上和垂直方向上的使用有差异，自己体验下比较好，不大会解释，⊙﹏⊙b汗。

关于箭头方向的实现：

#arrow:after {
content: "";
font-size: 0;
width: 0;
height: 0;
overflow: hidden;
border-width: 15px;
border-style: solid;
border-color: red green orange black;
position: relative; /* absolute 也行，看你定位需求了 */
display: block; /* 根据需求 */
}

多体会代码，看看最后一个代码关于箭头方向的实现，在比较一下前面两个例子就很简单了。P.s，写 Demo 挺烦人的，(-_-)!

八款漂亮的 Firefox 主题

Alan — Tue, 30 Nov 2010 09:09:10 +0000

自从不怎么搞美化后，XP 的主题和 Firefox 的主题都是 Tango 风格，不过 Firefox 的主题安装里面还是收藏着其他几款其他主题，个人觉得漂亮、很不错的，拿出来分享一下。好几款原先在 DeviantART 上的，不过现在很多主题达人都会放到官网的，所以这些主题官网都有的。

1. Tangofox

我现在一直在使用的主题。目前支持 Firefox 3.6 和 3.7，以后将会支持 4.0。推荐。

下载 Tangofox

2. Camifox

Camifox is elegant, crisp, and colorful. It’s a thoughtful and sophisticated reimagination and realization of a better “default”-like theme for Firefox, in living color on all platforms, inspired by the appearance of the excellent Camino browser.

Camifox 目前支持 3.6+，支持 Mac、Linux 和 XP。

下载 Camifox

3. Chromifox Extreme

CHROMIFOX COMPANION is now included with Chromifox Extreme themes. Companion will allow you to make changes to Chromifox Extreme for example: Change the position of the tabs, Turn on or off Urlbar customization. Companion also does a few things behind the scenes to make sure that Chromifox Extreme looks the way it does.

Chromifox Extreme 仿 Chrome 的样式，目前支持 3.5 – 3.7，其他都好，就是觉得高亮背景有点过亮了。

下载 Chromifox Extreme

4. Elementary Theme

目前支持 3.0 – 3.6，使用 Elementary 图标。跟 Tangofox 确实有点像。

下载 Elementary Theme

5. macfox NOSTALGIA

This theme is re-created very popular theme “macfoxII” at one time, because original macfox theme doesn’t support newer Firefox, so…
Original is “macfoxII 2.1.4″ by Kelly Cunningham

著名的 macfoxII 的继承，目前支持 3.5 – 3.6。强烈推荐。

下载 macfox NOSTALGIA

6. Vfox3

仿 Apple 样式，支持 3.1 – 3.7。该主题都几个样式，这里图片和下载链接都是 Vfox3_Basic 版。其他版本请点击下面进入查看。

下载 Vfox3_Basic

7. Strata40

This theme aims to give the user an interface as close to the new Firefox 4 mockups as possible. Please continue reading the description so that you know what add-ons should be used with this theme to get the ultimate Firefox 4 experience.

仿 Firefox 4 效果，支持 3.6 – 3.7。安装 StrataBuddy 可以修改主题实现更多效果，不过这个主题可能会和某些插件。所以作者还做了个 Strata40 Lite，不需要配合 StrataBuddy，实现 Strata40 基本效果。推荐。

下载 Strata40

8. Foxdie

Foxdie 也是一款很强大的主题，主题样式多种可供选择，设置选项丰富，以前也常用，不过更新速度着实有点。推荐。

下载 Foxdie

Alan's World

VIM and Sublime Text 2

Most Commented

LiveCD 修复 Grub

Related Posts

Windows7 下用 grub4dos 安装 Ubuntu

Related Posts

让 Terminal 使用 Solarized 配色

Related Posts

WordPress Theme: Optimus+

Related Posts

总结一

Related Posts

WordPress 主题 aSide 出售

主题说明

Related Posts

安装 Ubuntu 10.10 后若干问题

网络连接设置

字体设置

声音爆音问题

E: Sub-process /usr/bin/dpkg returned an error code (1)

最后是 Ubuntu 10.10 的一些更新源

Related Posts

CSS 气泡对话框

Related Posts

八款漂亮的 Firefox 主题

1. Tangofox

2. Camifox

3. Chromifox Extreme

4. Elementary Theme

5. macfox NOSTALGIA

6. Vfox3

7. Strata40

8. Foxdie

Related Posts