798.space漫游指南¶

引子¶

乔布斯说 ： “活着就是为了改变世界”。

然后，他死了。

某年某月末日，看了一篇关于中国共产党从无到有，从小到大的故事。

不由得心潮澎湃。

这真是人类史上最宏大的史诗级创业故事。

一小撮与众不同的热血青年，除了共同信仰一无所有。

他们用自己的双手和生命，点燃神洲大陆的星星之火，缔造了一个史无前例的红色帝国。

虽然有波折，有挫败，有狰狞岁月，有九曲回肠。

但是毋庸质疑，最终，他们还是成功了。

时至今日，最初十几个人的小团队，已发展成为地球上最大全产业链集团。

这真是一个传奇，属于他们那代人的传奇。

忆古思今，我们这一代人，又将会缔造怎样“史诗级创业故事”呢。

而我，又能在其中做些什么呢？

左思右想，辗转反侧，我最终觉得，只有整合全人类的力量，拉开星际移民时代的大序幕。

唯有这样创业故事，才能媲美他们史诗级的传奇。

但，面对这样伟大的事业，我又能干什么呢？

毕竟，我只是一个写网站小程序员，就像黑客帝国里的那个码农Nero。

左思右想，辗转反侧，我最终觉得，还是写先个网站吧，毕竟整合全人类的力量首先需要一个网站。

于是，便有了后面的故事。

序¶

“我多么希望世界上有个小岛，居住的全是智慧又善良的人们”。

—爱因斯坦

访问 798.SPACE 你可以很轻松的创建自己的垂直社区。

千里之行，始于足下。

798.SPACE 名字的起源¶

798，北京著名艺术区。

前身是当年集全东德的电子工业力量，包括技术、专家、设备生产线铸成的宏大工厂。

这是一个带有很强乌托邦情怀的盛大工程，属于那个懵懵懂懂的时代。

后来，工厂没落了，柏林墙倒了，东德也成为了历史教科书上的名词。

一群流浪艺术家驻扎了过来，把废弃的厂房改造成为了中国最著名艺术区。

有一天，我注册到了 798.SPACE （ 中文含义: 798.空间 或 798.太空 ）这个域名，我很喜欢这个名字。

科技与艺术，理想的老去，废土的重生，自由的创作与自我的表达，等等等等。

总而言之，我觉得它寓含了很多东西。

就是它了，798.SPACE 。

地球是人类的摇篮,但是人类绝不会永远躺在这个摇篮里

—前苏联科学家，康斯坦丁·齐奥尔科夫斯基

关于作者¶

生活不是贴在墙上的日程表。生活是充满激情、荆棘、光荣与梦想的伟大冒险。

程序是一种艺术创作，仿佛上帝在编码DNA，哺育着一个有着灵魂的数字生命。

—Noman

洛曼，喜欢科幻，每日YY。典型宅男。

与笔记本相依为命，不喜欢与人类接触。

是的，这是一只靠想象和自我催眠而维持存在的奇特地球生物。

欢迎关注我的 新浪微博

项目规划¶

基础知识¶

如果你连SSH登录Linux都不会，不妨看一看以下教程

• windows用户 - xshell入门使用教程
• mac iTerm2 使用指南

向服务器上传文件

• FileZilla使用 SFTP-SSH协议向服务器上传文件

运行docker镜像¶

配置开发环境是一个既繁琐又无趣的事情。

人生漫漫，有很多山峰等值我们去征服。但毫无疑问，配置开发环境不是其中之一。

我们以基于Centos7.0为例讲讲一下部署步骤。

大家可以在 QingCloud 上开启一个全新的Centos7.0系统运行该脚本。

以下各步骤都以root身份运行。

如果不是root用户，可以先sudo su切换到root用户

sudo su

我们先更新升级系统 ， 安装 docker 和 hg

yum update -y
yum install epel-release -y
yum install docker mercurial nginx tmux -y

然后启动 docker ，并添加到开机启动

service docker start
service nginx start
systemctl enable docker
systemctl enable nginx

因为众所周知的原因，国内的docker被墙了，我们需要启用一下加速服务

访问 DaoCloud的docker加速服务器 （登录后点此链接），按照网页底部的 操作手册->Centos 篇配置一下docker加速服务器。

接下来，我们pull最新798的镜像。

这个需要的时间比较漫长，我们通过nohup让其在后台一直运行，这段时间，我们可以断开ssh去睡觉了。

nohup docker pull 798space/798 &

我们可以通过tail来观察pull的进度( Ctrl+退出观察)

tail -f nohup.out

如果出现以下文字就是更新完毕:

Status: Downloaded newer image for 798/798:latest

我们可以通过 docker images 浏览看到 798 镜像。

如果出现问题可以重新pull一下，多尝试几次也许就好了。

接下来我们用hg clone下我们开发环境的home目录 ，并且启动docker

mkdir -p /home/
cd /home/
hg clone https://bitbucket.org/798space/docker_home 798
rm -rf /home/798/.hg
cd /home/798/
hg clone https://bitbucket.org/798space/798

最后启动docker

docker run -d -i -p 4242:4242 \
-p 10922:22 -p 10900:10900 -p 10901:10901 \
-p 10902:10902 -v /home:/home --name 798 \
798space/798 /etc/init.d/ssh start -D

注意，你需要配置云主机的防火墙，暴露 10922 , 4242 端口以便于我们从远程ssh访问登录docker镜像和修改html后浏览器自动刷新。

启动后，我们可以通过

docker ps

看到我们正在运行的docker

关机后重启这个docker镜像的命令是

docker start 798

然后我们就可以ssh登录进入docker

ssh 798@127.0.0.1 -p10922

127.0.0.1 也可以改为你服务器远程访问的IP

docker的798用户默认的密码是 798devos

登录进入docker镜像后，我们先修改一下文件权限

sudo chown 798:798 /home/798 -R

然后我们需要生成一下nginx的配置文件

cd ~/798/cli/docker
cp config.example.py config.py

你可以编辑config.py

vi config.py

修改域名为你自己域名。如果你想启用真实的域名，请将裸域名和泛域名都指向这台服务器

如果只是为了开发，可以保留原来的测试域名，然后在本机修改hosts文件指向此服务器。

C:\Windows\System32\drivers\etc\hosts

192.168.10.169 798.space
192.168.10.169 798-docs.798.space
192.168.10.169 minisite.xxx

python ~/798/cli/docker/make_config.py

vi /etc/nginx/nginx.conf

cd /etc/nginx/conf.d
ln -s /home/798/798/build/nginx.conf 798.conf
service nginx restart

cd ~/798
./cli/dev

coffee目录中的plim¶

在我们写网站的时候，经常会有写弹出框的需求.这时通常我们会在coffee文件中引入plim文件，为了解决查找麻烦的问题，我们将会用到的plim文件写在coffee的目录下,这样当引用plim文件时将会更加方便。

我们用到了下列技术

FIS¶

798.space 使用基于 FIS 的 PURE 作为我们纯前端开发框架的基础框架。

我们运行 ./cli/dev 脚本启动开发环境的时候，就启动了pure （PURE是FIS的一个定制版）。

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。

它提供了很多实用的特性来提供我们的开发效率。比如，修改保存之后html或脚本文件之后，浏览器会自动刷新网页。

详情参阅 * FIS前端工具框架

我们特别强调几点。

FIS可以通过pack来进行资源文件的合并，比如我们需要将DEMO中的公共库文件打包在一起，可以修改fis-conf.js配置，加入pack配置:

fis.config.set('pack', {
    'pkg/lib.js': [
            '/lib/mod.js',
            '/modules/underscore/**.js',
            '/modules/backbone/**.js',
            '/modules/jquery/**.js',
            '/modules/vendor/**.js',
            '/modules/common/**.js'
    ]
});

FIS可以在javascript脚本中对于声明其关于javascript和css的依赖关系，输出时，会自动在生产的HTML静态文件中引用相关的样式和脚本。

也可以在javascript通过 __inline 引用html文件， 这对于编写单页面全动态的网站（类似Gmail这种）帮助巨大。

详情参见 三种语言能力

leancloud¶

LeanCloud 提供一站式后端云服务，从数据存储、实时聊天、消息推送到移动统计，涵盖应用开发的多方面后端需求。

以后再也不用租服务器，也不用写后端代码了。

js数据存储开发相关链接 ：

• leancloud javascript数据存储文档
• 云代码

leancloud云代码命令行工具¶

leancloud云代码命令行工具是用来管理、部署云代码项目的命令行工具，称之为avoscloud-code项目。通过它，你可以部署、发布、回滚云代码，并且可以对同一个云代码项目做多应用管理，还可以查看云代码日志，批量上传文件到LeanCloud平台上等

安装avoscloud命令行工具:

sudo cnpm install -g avoscloud-code

在你开发和本地测试云代码项目通过后，你可以直接将本地源码推送到 LeanCloud 云代码平台运行，只要执行 deploy 命令:

./deploy

PLIM模板¶

plim 是 MAKO模板 的一种简便写法。

所以，你需要先了解什么是Mako。

请先仔细阅读相关文档

• Mako 中文文档
• Mako 官方文档
• Plim 官方文档

用plim模板写html有一些好处。

• 比写html更加简单，代码量更加少
• 再也不用担心html标签的闭合问题
• 简单的缩进表示嵌套让代码看起来更整洁

通常的页面，我们通过继承简化代码结构，比如继承基模板(基模板是所有页面都要继承的模板)

-inherit /_base/page.plim

基模板将html分成head，body，script 三部分(mako中的block)，三部可以分别被重载.

比如，继承基模板的head(head部分一般引用css文件):

-block head
    = parent.head()
    <!-- @require /css/index.css -->

如果是直接继承/_base/page.plim，parent.head可以省略，下同。

继承基模板的script(一般位于模板结尾，引用js文件):

-block script
    = parent.script()
    scrpit
        require('798')

其他部分将自动插入基模板的next.body()部分

SASS¶

Sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

Sass的使用方法使你的css的扩展和维护工作变的更加容易

相关链接 ：

• Sass用法指南
• Sass教程

通常情况下SCSS分成三个等级来引用:全局级，模块级，页面级

全局级和模块级的SCSS文件名用下划线开头，如_base.scss,_head.scss等

其中head部分，sidebar部分一般作为一个模块被引用。

当页面级的SCSS需要被其他SCSS引用时，请用@import

所有的SCSS导入文件都可以忽略后缀名.scss。

不被直接引用的css样式组件，我们以 _ 作为文件名的开头，如 _mixin.scss 。

这种文件在导入的时候可以不写下划线，可写成

@import "mixin"。

Compass¶

简单说，Compass是Sass的工具库（toolkit）。

Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

我们使用compass来编译我们的scss脚本。

相关链接 ：

• Compass用法指南

Coffeescript¶

CoffeeScript，是一种更好的JavaScript。

使用Coffeescript可以避免书写JavaScript时候遇到的许多问题，同时也能简化我们的代码书写。

比如，忘记用var定义变量，导致局部变量成为全局变量，进而导致名字空间的污染。

比如，可以用 for ... in , 而不用 for(var i=0;i<arr.length;++i) 如此麻烦的写法。

我们在项目中禁止书写原生JavaScript，所有的脚本都请用Coffeescript编写。

如果你在网上找到一些JavaScript脚本，希望copy&paste加以使用，请先通过 js2.coffee 将其转换。

相关链接 :

• Coffeescript中文站
• CoffeeScript小书

Semantic UI¶

Semantic UI—完全语义化的前端界面开发框架

跟 Bootstrap 和 Foundation 比起来，还是有些不同的，在功能特性上、布局设计上、用户体验上均存在很多差异。

Semantic UI 比Bootstrap更语义化，使用了更容易理解的标签名称：导航的是nav，主要内容的是main，class名也很明确，而且不像Bootstrap需要套很多层。Bootstrap很通用，兼容性很好，甚至能兼容低版本的IE，Semantic-UI则更Geek，有不少CSS3的特性，比如Shape和Reveal就很有趣。从界面设计风格来说，Semantic比Bootstrap(2)更扁平化.

我们在基模板中引用Semantic UI，编写代码时，注意复用Semantic UI中已有的功能组件

相关链接 :

• Semantic UI中文网
• Semantic UI官网

avalon¶

avalon是一个简单易用迷你的MVVM框架，为解决同一业务逻辑存在各种视图呈现而开发出来的。

MVVM将所有前端代码彻底分成两部分，视图的处理通过绑定实现， 业务逻辑则集中在一个个叫VM的对象中处理。我们只要操作VM的数据，它就自然而然地同步到视图。

相关链接 :

• 迷你MVVM框架avalonjs入门教程

View¶

View是对avalon中avalon.define的改写

定义一个View可以写成:

View(id,o,view)

改写文件coffee/lib/avalon_ext.coffee

avalon.nextTick¶

avalon.nextTick类似于Node.js里的process.nextTick()

相关链接 :

• 理解Node.js里的process.nextTick()

删除vim非正常关闭的临时文件 deltmp¶

当vim非正常关闭或文件被同时打开两次时的时候，会有临时文件

如何当一个文件上次打开时被非正常关掉.再打开时，按R恢复文件，然后：wq保存退出。

最后用deltmp命令删除临时文件

tree 以树形显示当前目录结构¶

• tree 以树形结构显示当前目录下所有文件和目录
• tree -d 仅显示目录
• tree -L <num> 限制目录的最大深度

ag 搜索¶

• ag <something> 在目录所有文件中寻找 something
• ag <something> -py 在所有 Python 文件中搜索 something (CSS,JS同理)

autojump 一键直达目录¶

autojump

在命令行中切换目录是最常用的操作，不过很少有比一遍又一遍重复“cd ls cd ls cd ls ……”更令人沮丧的事情了。如果你不是百分百确定你想要进入的下一个目录的名字，那么你不得不使用ls来确认，然后使用cd来进入你想要进的那一个。所幸的是，现在大量的终端和shell语言提供了强大的自动补全功能来处理该问题。但是，你仍然需要一直疯狂地敲击TAB键来干这事。如果你和我一样懒惰，你一定会对autojump感到惊喜。

autojump是一个命令行工具，它允许你可以直接跳转到你喜爱的目录，而不用管你现在身在何处。

• j <dir> 根据最近工作目录记录跳转到最合适的位置。

如果你不确认哪里是不是你要跳转的地方，敲击TAB键就会列出完整路径。

还是同样的例子，输入

autojump d

然后敲击tab键，将会返回/root/home/doc或者/root/home/ddl 。

如果你突然想要把当前目录变成你的最爱和使用最频繁的文件夹，你可以在该目录通过命令的参数 i 来手工增加它的权重

j -i [权重]

这将使得该目录更可能被选择跳转。相反的例子是在该目录使用参数 d 来减少权重

j -d [权重]

42qucc¶

42qucc 是在线的随手贴，可以随意地自定义网址来自己记录或与朋友分享文字。

42qucc < 某个文件名

42qucc xxx < 某个文件名

42qucc http://42qu.cc/6nhxuqpg > 文件名

Linux的回收站 - trash-cli¶

凡事只要有可能出错，那就一定会出错。

—墨菲定律

啊，删错文件了！！！

好吧，这已然是第N+1次了。

“此情可待成追忆，只是当时已枉然”。

我一直认为Linux最不人性化的设计就是没有回收站。

长期以来，rm命令就像一颗隐形的地雷，不知道什么时候就被踩到，壮烈牺牲。

“出师未捷身先死，长使英雄泪满襟”。

幸好，我们还有trash-cli，Linux的回收站。

与其等不小心误删除后去追悔莫已，去苦心钻研如何恢复文件，不如一开始就防患于未然。

故，兵书曰，善战者无赫赫之功。

想使用trash-cli，首先安装

sudo pip install trash-cli

然后修改全局的bashrc

alias rm="trash-put"
trash-empty 99

这样删除文件就会进入回收站而不被直接删除了。同时清空删除超过99天的文件。

通常全局bashrc的路径是

/etc/profile

此外，我们可以在root用户的crontab中配置

trash-empty 99

每天晚上3点执行，自动清空删除超过99天的文件

trash-cli 的命令如下

• trash-empty 清空回收站
• trash-list 查看被删除的文件
• restore-trash 恢复被删除的文件
• trash-rm 从回收站中删除单个文件

更多内容请浏览trash-cli 官方主页

本工具在798的docker镜像已中经内置并默认启用

NProgress.js¶

显示进度条:

NProgress.start()

设定一个百分比:

NProgress.set(0.4)

增加一点进度:

NProgress.inc()

完成进度:

NProgress.done()

store.js¶

store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash。store.js 会根据浏览器自动选择使用 localStorage、globalStorage 或者 userData 来实现本地存储功能。

相关链接 :

• store.js的API

__uri¶

js中，可以使用编译函数__uri(path)来定位资源，fis分析js文件或html中的script标签内内容时会替换该函数所指向文件的线上url路径。 如，源码:

js = __uri('demo.js')

编译后:

js = '/demo_33c5143.js'

798.coffee¶

解释一下该文件的代码

其中的:

clientWidth = $(window).width()
if clientWidth < 414
    scale = (clientWidth/414)
    document.write("<style>body{zoom:#{scale}}</style>")

用于做对手机的适配

其中的:

if current_user
    current_user.fetch()
    src = __uri("/modules/798/login1.js")
else
    src = __uri("/modules/798/login0.js")

document.write("""<script src="#{src}"></script><script>require("798/login#{!!current_user-0}")</script>""")

当用户登录时，引用login1.js

当用户未登录时，引用login0.js

require.js的用法¶

引入require.js的原因：当我们要引用多个js文件时，首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。而require.js的异步加载方式和依赖加载方式能够很好地解决这一问题。

在coffee中引入依赖模块的写法:

require_async(
   ["jquery","wow"]
    ->
       ...
)

其中require_async接收两个参数，一个是数组，数组元素即是依赖模块文件（省略.js);另一个是回调函数，当前面指定的模块都加载成功后，它将被调用。

有关模块化编程的相关链接 :

• 模块的写法
• AMD规范
• require.js的用法

弹出窗效果modal.coffee¶

文件目录coffee/lib/modal.coffee

文件共两个调用函数：

$.modal,$.modal_alert

$.modal接收四个参数，分别是html代码，semantic UI modal模块的配置option对象(可选，默认为空对象)，avalon view的id(可选)，view对应的回调函数(可选)。$.modal无返回值。

$.modal_alert接收两个参数，分别是html代码，semantic UI modal模块的配置option对象(可选，默认为空对象)

两者效果都是弹出框，前者是一般性的弹出框，后者弹出”我知道了”作为确认提示.

出错提示工具$.error_tip()¶

工具所在文件coffee/lib/jquery_ext.coffee

$.error_tip()接收两个参数，分别是出错提示对象elem，focus出错时是否选中文本并focus第一个出错位置。

引入js工具$$¶

工具所在文件coffee/lib/async.coffee

为了方便调用注册，登录等模块，我们经常将其写成js，并用$$工具引入。

$$引入的js有其固定的写法，当coffee文件的位置为 coffee/SSO/auth.coffee时，该文件的开头写成:

$.SSO.auth = {
    new : ->
        ...
    login : ->
        ...
        }

可以用$$(‘SSO/auth.new’)和$$(‘SSO/auth.login’)调用

fail¶

一般向LeanCloud发送请求时，返回错误信息用error接收，但是我们补充用fail改写error接收。

具体查看coffee/lib/av_ext.coffee文件

通过加速乐备案（或者免备案）¶

没有备案的话是可以使用香港节点的，备案用户可以使用国内节点。

http://www.jiasule.com/icp/

vim 快速入门¶

git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim

let NERDTreeIgnore=['\.pyc$', '\~$']

let g:ctrlp_custom_ignore = {
    \'file' : '\v\.(pyc|html\.py)$',
    \}

nmap <C-S>f :CtrlSF
nmap <C-S>o :CtrlSFOpen<CR>
nmap ss :CtrlSF <C-R><C-W><CR>
vnoremap ss y:CtrlSF <C-R>"<CR>

vnoremap <Backspace> :Commentary <CR>
autocmd FileType python set commentstring=#\ %s

生成配置文件¶

首先创建主配置文件:

cp 798/cli/docker/config.example.py 798/cli/docker/config.py

修改 config.py 中的 HOST ， 然后生成nginx和fis（pure）的配置文件

/798/cli/docker $ python make_config.py

这个脚本会输出生成的配置文件的路径。

然后打开nginx的配置文件:

sudo vi /etc/nginx/nginx.conf

在http段的靠前位置加入:

include /home/web/798/build/nginx.conf

其中，include后面的路径应为你实际生成nginx配置文件的路径。

然后重启nginx

sudo /etc/init.d/nginx restart

常用工具¶

前端¶

后端¶

实用工具¶

1. 生成随机用户 randomuser.me

设计欣赏¶

1. AWWWARDS
2. THE BEST DESIGNS
3. 整套设计 behance

设计素材¶

1. subtlepatterns 背景纹理
2. iconfont.cn 矢量图标
3. flaticon SVG图标