Fantasy

Programming & Thinking

Essay

上周的时候发布了一个Jekyll的站点 – Weekly. 主要是基于以前的一个想法:每天我们都会花比较多的时间浏览各种站点,当然包括了GitHub, V2EX, 知乎,微博等形形色色的地方。虽然很多站点都有「收藏」的功能,但是缺少一个汇总的地方。 而之前我都是通过Evernote的方式,每周开一个新的笔记,然后记录下这周发现的有关技术的内容。 虽然这种方式并没有什么不妥,而且可以很方便的看到自己每周收集到了什么,但是鉴于互联网的分享精神还是做了这个站点。 可以把Weekly看做一个我个人的「汇总」点。大概每周二左右会通过Jekyll发布一次,同时也会通过个人的微信公众号推送给订阅者。 贴一张Weekly的界面图,对移动设备做了简单的适配: 以及俺的公众号,欢迎订阅 :)

Node.js

此文接上篇。 上文中定义了一个最简单的名为User的Model: var UserSchema = new Schema({ name: { type: String }, password: { type: String } }); 亦即每个User只有两个属性:name和password。 注册 要实现注册功能,其实无非是在数据库中创建一条User的记录。此次通过自上而下(从Web界面到数据库操作)的方式来介绍。 一般的登陆功能,或者说前后端的交互都是通过Web请求(GET or POST)来实现的(或者还有其他的方式?)。 请求的入口就在前端(这里使用的是Jade),以form表单的形式: form(action='/register', method='post') input(placeholder='name', name='name') input(placeholder='password',...

Node.js

最近用Express开发了一个小的网站,分享一下。 (这个系列的文章会尽量写的比较浅显易懂,照顾刚入门的童鞋) Express可谓是Node.js领域Web开发最常用的框架了,之前做微信公众账号的时候就用过Express,不过这次是算是结合MongoDB和Jade开发一个完整的Web应用,不同于之前的经历。 最近写Node.js或者前端相关的代码都是用的JetBrains家的WebStorm,前段时间JetBrains的产品开始对edu邮箱的免费,正好问妹纸借了edu的邮箱注册了JetBrains的账号,于是下载了WebStorm等一系列IDE。 Start 在WebStorm中新建项目的时候,可以选择Express项目: 其实WebStorm使用的就是express-generator生成Express的项目,使用express-generator命令行也可以同样生成所需的目录结构: express project-anme 生成完一个简单的Express项目的目录结构之后,就已经可以运行了: npm start 可以观察到,项目启动的命令是写在package.json文件中的,如果要使用supervisor等项目工具来监听项目文件变化、重新启动Node服务器,便可以通过修改该文件中的命令来实现,如: "scripts": { "start": "supervisor ./bin/www" } MVC与路由 虽然对于一个Web项目而言,并没有固定的目录结构,但是从经验以及约定俗成来看还是MVC最为流行。这次我也是用的MVC的结构,同时稍微扩充了一个Service层把数据定义和操作分割: Model:只定义数据库里的存储结构 Service:定义读取和存储数据库的方法 Controller:调取Service中的方法来将数据render到View View:通过Jade模板展现数据以及前端的展示逻辑 使用express-generator默认生成的目录中会带有一个routes文件夹,其中包含了两个文件。但是事实上我们并不需要通过不同的文件来定义不同的路由 – 原因是路由的代码实际上并不多,一般一个页面的操作的路由代码仅仅只有1~3行,而且如果将路由放在不同的目录中会需要同时在这些文件中require('express')。 还有一点是我们通过MVC建立起的结构,可以在控制路由的代码中调用controller里的方法(这也就是上文中说「仅仅只有1~3行」的原因),例如: app.get('/',...

iOS

最近在拿Swift练手做iOS的应用,也是第一次实现一个简单的TableView。 Storyboard 在新建完项目之后,通过Storyboard添加一个TableView到默认的ViewController中,如图: 关联元素与代码 在Storyboard中可以通过⌥+⌘+Enter呼出Storyboard中ViewController所对应的代码中的ViewController类: 然后通过按住ctrl拖动Storyboard中元素的方式,将Storyboard中的元素关联到ViewController类中: @IBOutlet var tableView: UITableView! 嗯,在这之后就可以开始编写我们的TableView的代码了。 TableView 首先我们要定义一个静态的数组,用于在每一个cell中展示: var dataArr: [String] = ["One", "Two", "Three", "Four"] 首先,我们需要在viewDidLoade方法中「注册」我们的TableView,相应的需要传入cell的标示符,这个标示符其实最好在ViewController类中以静态变量的形式定义: let cellId: String = "cell" 不过现在为了方便起见,可以在函数中显示声明这个id: self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier:...

iOS

几天前,我又开始了学习iOS开发的历程。(之前用Objective-C开发过一个简单的App,可以在此阅读与之相关的文章:开发Musiculator 这次我准备开发一个微博的客户端,基于TabBar。因此需要自定义UITabBar以及UITabBarItem。 使用过storyboard的同学一定觉得,对于开发者而言可以在storyboard中很容易地自定义TabBar和TabBarItem。但是我在Xcode5中尝试了之后却失败了(具体过程就不赘述了,可以简单的通过新建一个基于TabBar的应用尝试一下),这着实让我觉得很奇怪。 UITabBar 在探索了一番StackOverFlow之后,发现没有办法根据自己的需要自定义UITabBar的高度 – 因为它是一个常量。 不过对于其他的诸如背景色、字体颜色等内容还是可以在AppDelegate.m中非常容易处理的: 更改背景色: [[UITabBar appearance] setBarTintColor:[UIColor whiteColor]]; 更改字体颜色: [[UITabBar appearance] setTintColor:[UIColor whiteColor]]; UITabBarItem 在自定义UITabBarItem的图片的时候,着实迷惑了一把。 StackOverFlow上很多的教程和回答给出的方案或是大同小异,或是大相径庭,不幸的是在我所找到的教程和回答中无一能够真正解决问题。 在参考了Apple的API文档以及在模拟器上尝试过之后,终于找到了正确的自定义他们的方法(其中曲折就不细谈了): 新建一个基于TabBarViewController的子类 在Storyboard中设置自定义的类 给UITabBarItem设置图片: // 获取指定的 UITabBarItem UITabBarItem *itemOne...

git

Let’s start the article with a few background knowledge: gollum: Git-powered wiki engine which provide users a local front-end to edit wiki with various formats (such as GFM, a.k.a, GitHub...

Front-end

在去年的时候,曾经写过一篇博客介绍Grunt: GruntJS初体验,以及当时使用的时候遇到的一些问题。 不过从那之后,就一直听说有一个更好用的Task runner – gulp。尽管现在才使用有点落伍了,但是还是想分享一下使用gulp轻松而愉快的经历。 gulp和Grunt一样都是通过项目根目录下的「配置文件」来进行「任务」的定义的。 配置文件 在我使用Grunt的经历看来,Grunt的配置文件比较固定: module.exports = function(grunt) { grunt.initCofing({ // config tasks }); grunt.loadNpmTasks('some-task'); grunt.registerTask('default', 'some-task'); } 相比而言,gulp的配置文件就像普通的Node文件一样: var gulp = require('gulp'); gulp.task('default', function() {...

Node.js

前天晚上闲着的时候,研究了一下如何开发、发布一个NPM package,于是选了一个比较简单的想法实现了一下。 这个package的名字叫做node-weather,想必看名字就知道他的功能了。从前天开发到现在版本已经衍生到0.1.4。主要实现的功能是调取百度LBS云的天气接口,在终端中查询今明后三天的指定城市的天气情况。 先简单的介绍一下NPM吧(若你未曾听闻过)。 NPM NPM也就是Node Package Manager,就如同Ruby中的Gem,Python中的pip等,是一个开源的Node的包管理工具。 截至我写这篇博客为止,NPM上已经有84849个包。当然,由于NPM的自由度极高,其中包含了很多参差不齐的开发者所开发的包;也有很多几乎已经「阵亡」的包,占着NPM的坑。 所有NPM中的包都可以通过npm命令来进行操作,这当然不具体展开了,可以查询NPM的api或者在终端中输入npm来查看其用法。 node-weather 以下介绍以下node-weather的用法以及其实现。 用法 与所有其他NPM中的包一样,可以通过npm的命令来进行安装。 [sudo] npm install node-weather [-g] 如果你不想要使用了,则可以一样轻松的卸载之: [sudo] npm uninstall node-weather 当前node-weather只实现了两个命令: // 查看天气情况 node-weather 城市名 //...

iOS

上周初步研究了一下如何开发iOS应用。然后想到了当时@zc在学校里做的一个HTML 5的小应用 – Musiculator – Music + Calculator. 本文简单的介绍一下上周做应用的几个步骤以及一些想法,当然也为那些像我一样想尝尝鲜的小菜鸟在不知从而下手的时候来上那么一缕春风~ UI 新建完iOS的项目之后会发现项目中有一个Main.storyboard的文件,这也是这次我用来画UI的工具,细心的观众朋友一定能在Xcode的界面中找到一个控件的区域,于是我们就可以拖拖控件完成一个比较简单的界面啦。 这是我画完后的界面: 说实话我挺喜欢这个界面的(哈哈),但是理智告诉我要给按钮添加一道边框。无奈的是在storyboard中怎么也找不到如何修改控件的样式,于是我就开始各种Google了(o(╯□╰)o) 键入option+command+enter,可以直接在storyboard右侧调出ViewController。其实接下来要说的是一种比较费劲且无脑的方法,在storyboard中选中控件,按住control直接拖到右侧的ViewController.h中 – 创建一个控件与代码之间的「连接」。 选择新建Outlet型的Connection之后,就会生成这样的代码(zeroBtn是自己取的ID): @property (weak, nonatomic) IBOutlet UIButton *zeroBtn; 然后再次拖动同一控件到这个声明语句下,就选择Action型的Connection: - (IBAction)typeZero:(id)sender; 这样就可以为控件绑定事件之类的了。对于上述过程,只能说对其原理还不了解(有待学习)。 对了,其实上述界面拖动之后的界面并不是我所期望的界面 – 还希望为我的按钮们添加边框及颜色。...

Front-end

同事在自己的电脑上装了一个Android模拟器,用来在电脑上查看现在做的M站的效果。(这让我想到了当年在学校里还折腾过ADT(Android Develop Tool),只依稀记得电脑各种卡翻着实痛苦难堪。)不过相隔多时,感觉模拟器比之前的看起来好多了。 而之前还尝试着用过Chrome的远程调试,也就是连着USB线在Android的Chrome上调试网页 – 不过很不幸的是总是「时有时无」,所以我觉得这种方法不太稳(kao)定(pu)。 后来突然想起来电脑上是装了Xcode的,于是找到了iOS Simulator。 Simulator 如果有机会,也准备学习开发iOS,不过这次是用来调试网页。 Xcode的模拟器有iPhone3.5寸和4寸(包括64位)以及iPad和iPad Retina等。从我非常不专业的角度看来,iOS simulator非常流畅,用起来至少不会卡,所以感觉非常不错。 Inspetor 废话不多说,要使用iOS simulator和桌面的Safari调试其实只有两步: 需要打开Settings->Safari->Advanced->Web Inspector,然后在模拟器的Safari中打开网页 在Safari中选择Develop->iPhone Simulator,然后直接可以选择之前打开的网页了的inspetor调试了 如图: 在Safari中找到模拟器中打开的网页: Inspector: 调试 打开了Safari的Web Inspector之后我们就可以开始调试了: 当然,再次从我非常不专业的角度来看,Safari的Web Inspetor和Chrome的Web Developer Tool在界面上还是有比较大的区别的,但是总体的功能相差无几。所以若是习惯了额使用Chrome...