Pakyow——针对设计师和视图优先开发驱动的新 Ruby Web 框架

原文链接地址:http://www.himysql.com/pakyow-a-new-ruby-web-framework-which-friendly-to-both-designers-and-developers.html

Pakyow 是一个针对新型 Web 网站的开源框架,一个对设计师和程序猿都友好、具备快速开发过程的框架,一个和谐的框架。

Pakyow 的目标视图驱动开发,给予设计师一个可以完全掌控的流程。

在 Pakyow 中,视图是跟后端应用完全隔离的,设计师可以在整个开发过程中拥有完全的把控。完全可以创建一个可工作的、可浏览的网站原型,而不用写一行后端代码。后面,再行在视图上添加一层后端,同时保持前端的原型不用变化。

Palykow 提供一个更简单的方法搭建基于 web 的软件,特性如下:

  1. 基于 Ruby:超级简单地安装过程和非常低的学习曲线
  2. 比 Sinatra 快 45% 以上

…未完待续…

ruby | leo | | (0) |

自定义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 中同名文件。

2014年8月7日更新:度盘: http://pan.baidu.com/s/1o6mIxRG 密码: wgqc

前端开发之 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) |