Fantasy

Programming & Thinking

Front-end

最近在做一个小东西:Toolbox,目的是提供一个给开发者使用的「工具箱」。也正是在做这个东西的同时,研究了一下sourcemap相关的内容。 之前更新了电脑上的Sass版本后(大概是3.4版本)编译的的Sass文件会自动生成sourcemap的文件。当时说实话不知道这是干什么用的,就默默的搜索如何在编译时加上参数不生成sourcemap文件。但是之后还是回头去看了看sourcemap为何物、有何用、如何用,谨以此文分享一下。 Source map 简介 Source map应该是最先应用于JavaScript的技术。(关于这一点并没有进行考究,但是从我搜索到的资料来看,应该是Google Closure最先提出的sourcemap调试技术) 由于很多框架、类库都相对比较庞大,所以在真正投入生产环境使用的时候都会用各种工具进行压缩、转换。 因此在浏览器中对使用这些「转换」过的代码进行调试都会感到十分迷惑:这种压缩过的代码要怎么调试?而sourcempa就是为了解决这个调试问题而诞生的。同样的,对于Sass这类CSS的预处理工具而言,Source...

Front-end

最初是想在文章中对比、探讨、研究一下JavaScript模块化方面的内容(其实连提纲都写好了),但是写着写着发现自己的功力不够: 仅使用过SeaJS和一点点的RequireJS 对于很多诸如模块规范、运行机制方面的东西不甚熟悉 开发的经验并不足够多,对于工程实践上的诸多内容不够深入 所以本文仅仅讨论一些关于JavaScript模块化的内容,着重介绍如何使用Browserify、搭配gulpjs来实现Web前端的JavaScript模块化。 关于JavaScript模块化 由于JavaScript语言(泛指当前广泛使用的版本)本身并不具备如同Java, Python等语言的类、模块、包等机制,并不能通过诸如import等方式加载同一项目中的不同模块,而随着Web开发方式的演进、客户端JavaScript的大放异彩,更加「有序」地组织页面的JavaScript代码就成为了一种必然的需求。 相信编写过稍具规模的Web应用的同学应该能够体会到JavaScript的这种「缺陷」,不过程序员天生就是一种没有轮子创造轮子的职业。 于是乎,JavaScript模块的组织方式出现了AMD,...

Node.js

由于绑定信用卡后可以免费使用1年的AWS,在今晚把玩了一下AWS EC2。 试用了一会AWS之后给我的好感主要源于以下几点: 服务种类多,包括了EC2, VPC等30余中云计算、数据库、网络服务、数据分析的服务: EC2实例的种类多,现有的就包括Red Hat, SUSE和Ubuntu等(当然还有Windows Server). 基于Web的强大的管理后台,这点可能要使用过后才能感受一二...

Essay

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

Node.js

此文接上篇。 上文中定义了一个最简单的名为User的Model: var UserSchema = new Schema({ name: { type:...

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项目的目录结构之后,就已经可以运行了:...

iOS

最近在拿Swift练手做iOS的应用,也是第一次实现一个简单的TableView。 Storyboard 在新建完项目之后,通过Storyboard添加一个TableView到默认的ViewController中,如图: 关联元素与代码 在Storyboard中可以通过⌥+⌘+Enter呼出Storyboard中ViewController所对应的代码中的ViewController类: 然后通过按住ctrl拖动Storyboard中元素的方式,将Storyboard中的元素关联到ViewController类中: @IBOutlet var tableView: UITableView!...

iOS

几天前,我又开始了学习iOS开发的历程。(之前用Objective-C开发过一个简单的App,可以在此阅读与之相关的文章:开发Musiculator 这次我准备开发一个微博的客户端,基于TabBar。因此需要自定义UITabBar以及UITabBarItem。 使用过storyboard的同学一定觉得,对于开发者而言可以在storyboard中很容易地自定义TabBar和TabBarItem。但是我在Xcode5中尝试了之后却失败了(具体过程就不赘述了,可以简单的通过新建一个基于TabBar的应用尝试一下),这着实让我觉得很奇怪。 UITabBar 在探索了一番StackOverFlow之后,发现没有办法根据自己的需要自定义UITabBar的高度 – 因为它是一个常量。 不过对于其他的诸如背景色、字体颜色等内容还是可以在AppDelegate.m中非常容易处理的: 更改背景色: [[UITabBar...

Front-end

在去年的时候,曾经写过一篇博客介绍Grunt: GruntJS初体验,以及当时使用的时候遇到的一些问题。 不过从那之后,就一直听说有一个更好用的Task runner – gulp。尽管现在才使用有点落伍了,但是还是想分享一下使用gulp轻松而愉快的经历。 gulp和Grunt一样都是通过项目根目录下的「配置文件」来进行「任务」的定义的。 配置文件 在我使用Grunt的经历看来,Grunt的配置文件比较固定: module.exports...