自定义Sublime Text 3 皮肤 Spacegray 和括号配对显示插件 BracketHighlighter 适配 base64-ocean.dark 色彩主题

BracketHighlighter

先上一张效果图,请注意最左边

BracketHighlighter 可以将“括号”配对情况显示出来的插件。为什么要将括号两字加上引号呢?因为 BracketHighlither 能显示的配对情况不仅仅是正常的括号,HTML标签、begin…end 等类型的配对也适用哦。

Spacegray 皮肤与 base16 ocean dark 色彩主题

Base16 ocean dark 色彩主题在前文《推荐一款小清新的色彩主题(附atom和sublime text安装使用方法)》已经做过推荐。

Spacegray 是一款比较精致的皮肤,为了适配 Base16 色彩而专门研制。所以,装好 Spacegray 之后,默认就会同时帮你装上 base16 的色彩主题。可(tui)以(jian)通过 Package Install 的方式安装。

BracketHighlighter 与 Spacegray & Base16 ocean 整合

BracketHightlighter 默认的形式真是普(tai)通(cou)。好在,这款插件支持自定义配置。看着官方 repo 中示范图比默认的好看多了,撸起袖管将之与 spacegray & Base16 ocean 整合。

成果分成两部分:

  1. BracketHighlighter 配置:

    https://gist.github.com/leopku/89ff7eb32b8563e0b523

    粘贴进 Preferences -> Package Settings -> Bracet Highlighter -> Bracket Settings – User

  2. Spacegray 配置: http://yunpan.cn/QCWDM4fLskvHV(提取码:86ba)

    将下载回来的文件覆盖: (Mac下) 资源库 -> Application Support -> Sublime Text 3 -> Installed Packages 中同名文件。

前端开发之 API 跨域请求代理插件 grunt-connect-proxy 配置 (基于0.1.10版)

Grunt-connect-proxy

最近的前端项目均基于 yoeman 搭建。yeoman 基于 grunt ,默认启动 9000 端口的 WEB 服务,开发起来非常方便。

不过,我们的后端项目监听在 3000 端口。在向后端请求时,出报跨域的错误。

幸好,找到了 grunt-connect-proxy 用于代理 API 跨域请求。

不过,网上好多资料看上去都是基于旧版本的。本文写作时 grunt-connect-proxy 最新版为 0.1.10,网上的配置要么太复杂要么不能正常工作。

正确的配置

新版的配置简单多了:

# javascript
grunt.loadNpmTasks('grunt-connect-proxy'); //引入里Task

connect: {
    options: {
        port: 9000,
        hostname: 'localhost',
        livereload: 35729
    },
    // 在这里加入下面的内容
    proxies: [
        { context: '/api', host: 'localhost', port:3000 },
        { context: '/aapi', host: 'localhost', port:4000}, //还可加多个
    ],
    //加入结束
    livereload: {
        options: {
            middleware: function (connect) {
            return [
                // 加上下面这行
                require('grunt-connect-proxy/lib/utils').proxyRequest,
                ...
            ];
        }
    }
}

//最后在 serve Task 里加上 configureProxies:server
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
    ...
    grunt.task.run([
        ...
        'configureProxies:server', //在 livereload 前加上
        'connect:livereload',
        ...
    ]);
});
前端技术 | leo | | (0) |

OSX系统下随手建高性能静态文件服务器

场景

  • 临时在局域网内共享一个文件
  • 从网上当了一个项目(尤其是 js 类前端项目),需要临时起个 Web Server 跑一下试试。

静态文件服务器常见选择

  1. 专业静态文件服务器,有 nginx, apache, lighttpd 等等
  2. 开发语言带的简易模块
    • python :$ python -m SimpleHTTPServer
    • php: $ php -S localhost:8000
    • ruby: $ ruby -run -e httpd . -p 5000

不过这些都不是今天的主角,第 1 类太专业,需要专门安装配置,正常情况下个人使用的 Mac 不会安装;第 2 类方便快捷是有了,但都只能做一个简单响应或下载服务器,在多线程(比如有ajax请求的静态页面)环境中性能就会出现很大瓶颈。

下面,有请今天的主角,方快强悍的 Twisted 上场!

Twisted

Twisted 从 OSX 10.5 版本起,就被默认随系统一起提供。它鼎鼎大名,我就不多介绍了。直奔主题:

终端下运行: $ twistd -no web --path=. 接着就享受快感吧

可以将这句做成 alias 放进 .bashrc 或 .zshrc 中方便调用。

广告时间:使用 zsh 的童鞋们,欢迎使用、反馈我的 zsh 配置。对于这个案例来说,将 $ twistd -no web --path=. 放进 ~/.alias_local 文件中,再执行 $ config.zsh.alias.local.refresh (不要被这么长的命令吓倒,可以 tab 补全哦)即可。

对于非 OSX 系统肿么办?

Ubuntu

$ sudo apt-get install python-twisted-web

BSD

$ sudo port install py-twisted

未分类 | leo | | (0) |

【2014.4.20更新增加epub版】分享两个电子书整理 《Gevent程序员指南》、《七天学会 NodeJS》(PDF版、EPUB版)

《Gevent程序员指南》和《七天学会 NodeJS》是两本非常在线技术资料,但是在线版本不利于移动设备离线时观看。

这两本 PDF 针对字体做了优化,源代码也作了高亮,适合阅读。在制作过程中,对原文一些细节上的错误作了修正。希望这两本 PDF 成为你马桶、公交、地铁上打发时光的好伙伴。

2014年4月20日更新:

  • 增加封面
  • 增加 EPUB 版本

Gevent程序员指南

内容来自 http://xlambda.com/gevent-tutorial/,版权和中文版版权分别归原作者与译者所有。感谢原作者与译者的辛苦付出。

下载

2014.04.20 PDF 版:http://pan.baidu.com/s/1eQiRh4m

2014.04.20 EPUB 版:http://pan.baidu.com/s/1gdwwpnP

七天学会 NodeJS

内容来自 http://nqdeng.github.io/7-days-nodejs/,版权归原作者所有。感谢原作者的写出这么好的教程。

下载

2014.04.20 PDF 版: http://pan.baidu.com/s/1kTr4xDH

2014.04.20 EPUB 版:http://pan.baidu.com/s/1kTG6U5h

原文的建议欢迎反馈给原作者,PDF 的问题欢迎反馈在评论区。

未分类 | leo | |

推荐一款小清新的皮肤(附atom和sublime text安装使用方法)

近日发现名叫 base16 的皮肤,色调比较柔和,眼睛比较舒服。跟之前一直使用 solorized 相比,有种小清新的感觉。

这款皮肤在 atomsublime text 中都适用

atom.io

安装

atom 我就不多说了,最近最火的编辑器,没有之一,不了解的同学请自行放狗搜 atom.io

atom 自带包管理器,安装插件、皮肤这些非常之方便

apm install base16-ocean-dark-spacegray

完成之后重启一下atom,在“设置”->“皮肤”中选择 base16 ocean dark 即可

效果图

base16-ocean-dark-in-atom

顺便说一下:atom 对 markdown 支持很好,而且是 Github 自家产品,尤其对 GFM 格式的语法高亮的支持,大爱!

Sublime Text

安装

Sublime Text 可以通过先安装包管理器,再使用 Package Install 安装 Base16 Color Schemes 的方式来安装

也可以手动安装,不过个人推荐上一种方式,就不介绍手动安装的方式了,有兴趣折腾的同学请自行搜索。

记得安装完成之后,在 Sublime Text 中设置一下 Color SchemeBase16 Color Schemes -> base16-ocean.dark

效果图

base16-ocean-dark-in-sublime-text

未分类 | leo | | (3) |

推一个 Rails4 下语言化、轻量级、易用且自带 WEB 管理的权限管理 gem

https://github.com/the-teacher/the_role

所有权限按两级hash的方式定义,并以json字符的方式存在数据库中

官方文档号称:永别了CanCan

ruby | leo | | (0) |

小米盒子2跟Mac做airplay很方便

朋友以前曾送过某品牌盒子,拿回家试了两天,发现操作各种卡,播放视频时不时地停下来缓冲更让人抓狂。于是看了两次就被遗忘在电视柜角落里落土了。

上周,幸得蛋总 @54chen 赠来一小米盒子2之 F 码,遂下单。今天快递送至家中,迫不及待接上 HDMI。

电视开机后,自动转到无线网络询问界面(没接有线),蛮人性化,点一个赞。

设好无线后,进入主界面,LP大人指示要看 TVB 剧集,找了一下没有为 TVB 单独列出来,上述某品牌则有一个单独频道全是 TVB 剧集,对于LP和我这种看港剧长大的,算是一个小缺憾吧。

进了电视剧频道,选了一部之前没看完的老剧《东西宫略》。从第 1 集从头看起,缓冲了大约一分钟不到(完全是凭感觉)的时间开始正式播放。

中间因为吃饭等原因,暂停播放,盒子在一小段时间后自动转成待机状态,或者准确地说是屏保状态,播放图片。

期间,寻找播放历史、从视频切换回剧集列表等操作都非常流畅,这个要点个大大的赞。

下面,说说 Mac 的 airplay 与小米盒子 2 的操作。

这。。。有得说吗?我也觉得没得说,因为太简单了,用 itunes 打开视频,点 airplay 那个按键,Mac 上播放的视频就可以投到电视上了,比我相像中的简单得太多。

下面,再说一下一些高级玩法:

Mac 不仅仅可以使用 itunes 分享视频到小米盒子2。Mac 通过 airplay 分享屏幕到小米盒子2 也是很简单。

“系统偏好设置” -> “显示器” -> “AirPlay 显示器” -> 选择“小米盒子” 即可

如果在状态栏中已经有 AirPlay 图标,通过状态栏上的 AirPlay 图标直接选择“小米盒子”也是非常快捷方便。

拿着 Mac 触摸板,看着电视,操作 Mac 感觉真是惬意无比。

未分类 | leo | | (3) |

新年福利,HiMysql 同款 HTML5 响应式 WordPress 皮肤【已github托管】

前言:新年没啥红包送给大家,将这款 www.himysql.com 正在使用的 theme 送给大家。这款 theme 年前基本搭好架子,并在 www.himysql.com 上运行了几个月,也曾经在小范围内发布过一次。这几天趁过年忙里偷闲,将这款 theme 完善一下,当作新年福利吧。

Semantic-ui-wp-theme

Semantic-ui-wp-theme 是一款基于前端框架 Semantic-UI 的 WordPress 皮肤(theme)。

本款皮肤具备如下特点:

  • 响应式设计,适应智能手机、平板、电脑等多种设备。
  • 多种美观的页面元素:标签、评论等等
  • 页面清新,结构紧凑,整体简洁大方
  • 优化的字体显示效果,尤其针对 Mac 用户
  • 大量使用 html5 和 css3 技术,避免不必要的图片,让网站在拥有美观的界面同时,又不影响访问速度。
  • 多国语言支持,目前支持中、英文两种语言

更新

  • 2014年2月14日情人节,代码托管至 github,地址: https://github.com/leopku/semantic-ui-wp-theme

依赖

  • WordPress 3.7.1 或以上版本

安装

  1. 下载 zip 包:https://github.com/leopku/semantic-ui-wp-theme/archive/master.zip 或 git clone git://github.com/leopku/semantic-ui-wp-theme
  2. 将压缩包上传到 wp-content/themes 目录下
  3. 在后台管理,选择 外观 > 主题,启用 semantic-ui-wp-theme 即可

截图

问题反馈

至官方网站 www.himysql.com 的 semantic-ui-wp-theme页面 留言

前端技术 | leo | | (8) |

Mac和Linux下测试端口是否存活一法

测试端口存活的最常用的方法是telnet

$telnet 127.0.0.1 80

不过这个方法有一个不方便的地方:连接成功后会进入交互模式,需要按 ctrl + ]q 才能退出。

后来,经过网上一番搜索,发现一个简便的方法,请出大神 nc

$nc -zv 127.0.0.1 80
Connection to 127.0.0.1 port 80 [tcp/arepa-cas] succeeded!    # 成功
nc: connectx to 127.0.0.1 port 80 (tcp) failed: Connection refused    # 失败

命令运行后,1. 不会进入交互模式,立即返回;2. 成功和失败的返回值特征很明显,在脚本中做判断非常方便。

linux mac | leo | | (0) |

使用Markdown编写博客(WordPress)并实现语法高亮

大约六七年前使用Docbook写了一段时间技术文档,并且使用了所见即所得的Docbook xmleditor 使用写作工具。并且搭建了Docbook转PDF和HTML的环境。

后来,发现 reStructuredText 比 Docbook 简单,有一段时间写作就改用 reStructuredText,但是一直没有合适的写作工具。也曾经寻找过
reStructuredText 的Wordpress插件,但也是没有找到能用的插件。

最近些年 Markdown 的势头无法阻拦,相关解决方案比前两者也多得不在一个数量级上。尤其在使用 Mou 和 Sublime Text 2 的 MarkdownEditing 插件,几乎使写作基本上都使用 Markdown。

前一阵子折腾博客升级、写皮肤,顺便找了一下 WordPress 的 Markdown 插件,成熟方案还不少。一番比较后,最终选择了 WP-Markdown 这个插件。你看到的本篇博客和前面多篇博客都是使用这个插件完成。

WP-Markdown 在编辑框下面提供了实时预览,也可以算得上所见即所得了,这是吸引我的最大亮点。另外,它在编辑框上面还提供一个简单的工具条,有“加粗”、“斜体”、“链接”、“有序列表”、“无序列表”等常见工具,也算是一个贴心设计吧。

语法高亮方面,有两个插件:

  1. wp-markdown-syntaxhighlighter

  2. SyntaxHighlighter Evolved

本来以为 wp-markdown-syntaxhighlighter 这一个插件就能实现语法高亮,结果装上后发现没效果。后来又装上了 SyntaxHighlighter Evolved,发现这两个插件要配合起来一起使用才有效率。具体效果看博客上的效果吧。

期间,也试过其它语法高亮插件,比如: Crayon Syntax Highlighter,经过比较,最终还是选择了 SyntaxHighlighter Evolved。SyntaxHighlighter Evolved 能在代码段前指定代码的语言。

未分类 | leo | | (6) |