Thoughts, stories and ideas.

CSS

font-size 的常用长度单位

font-size 是网页开发的过程中 CSS 语言针对字体的一个属性，通常我们在设计一个网页时会使用不同的字体大小，可以方便对应 html 中的不同标签，我们一般作为 Heading 在整个项目中去不断的复用这些 Heading。像诸多设计工具一样，font-size 也有不同的单位，设计常用的单位可能有像素（px）、厘米（cm）等，而在 CSS 中 font-size 常用的单位有 rem、em、px、pt、% 这几种。那么 font-size 的不同单位都有什么不同呢？ 相对长度单位 em、rem、% * em ，1em 就等于当前元素的字体大小，在印刷媒体时代，通常是用 M 的宽度表示 1em ，其由来由于英文中的 -- 与 M 是等宽的，--
— 5 min read
随想

动与静

一个平常的早晨是9点钟起床，10点钟左右出门，然后乘2号线地铁上班，江苏路下车后走路去公司。今日却有点不同了，我像往常一样路过我平日里买包子的包子铺正准备买包子，这时包子铺的老板娘问了一句：“一个肉包子和一个粉丝包子是吧？”，我愣了半响，反复思考一个问题：我的生活竟然已经按部就班到连包子铺的老板娘都知道我的习惯了。
— 3 min read
iOS Develope

Golang 开发跨平台SDK（iOS, Android），Part 1

**前一篇 [https://xeodou.me/2015/11/03/write-a-react-native-native-module/] **介绍了用React-Native做跨平台开发，其实Golang在1.5发布以后也是支持做移动端的跨平台开发的，Golang的移动端开发支持两种模式，一种是使用Golang开发整个应用，另外一种便是使用Golang开发common library。这两种各有优缺点，前者没有完善的UI库，如用来开发一个完整的应用需要的工作量着实有点不小，或者用来开发游戏可能也是一个不错的选择，亦或者寄望于Google可以开发出完善的UI库，至于后者想对于前者就方便多了，Google的GoMobile项目已经完善了大部分的工作，现在的缺点就是支持的数据类型还是远远不够，而且现只支持ARM架构。所以现阶段二者都还有些限制，但是作为一个跨平台的备选方案还是有其可取之处的。 How it works 在Google GoMobile的项目里Google提供了一个工具gobind，gobind 可以生成对于Java和Objective-C的bindings。下面是一
— 2 min read
reactjs

React-Native Native Module In Practise

React-Native [https://facebook.github.io/react-native] 是Facebook 开发的一套移动端跨平台开发的框架，其脱胎于 ReactJS [https://facebook.github.io/react/] 。React-Native允许你使用JavaScript开发移动端的应用，相对于 PhoneGap [http://phonegap.com/] React-Native 确实带来了原生应用的性能，如果之前有写过ReactJS，用React-Native开发一个移动端应用是非常容易的。不过虽然React-Native社区一天天壮大，但是仍旧可能需要自己开发一些React-Native的原生模块。 什么是React-Native原生模块 React-Native 模块就是包含原生代码库的React-Native的模块（在Android 里是包含Java代码库，在iOS里是包含Objecive-C/Swift代码库），其工作原理是将原生代码库加载到React-Native的包管理器中，然后用JS通过React-Native的b
— 3 min read
windows

一个简单的问题

最近一直忙于缅甸大选的投票系统，做Windows客户端给缅甸的人民用。由于种种原因我们用SQLCipher做客户端的数据库，Golang做中间的数据层。 我们的SQLCipher的Golang驱动是通过SQLCipher和SQLite驱动 [https://github.com/mattn/go-sqlite3] 修改来的，中间用了很多cgo的混合编码，其中就有著名的加密库OpenSSL。 编译好的exe文件直接执行的话会报missing libeay32.dll的错误。 之前我们的做法是把编译后的libeay.ddl放到系统目录C:/windows/system32文件下，这个文件下的所有dll 文件都是可以被任何应用共享的，问题自然就解决了。但是有一个问题是需要管理员确认才能将文件复制到该目录，所以我们就需要一个window installer去复制文件，其中还需要用户确认。现在我们的需求是解决这个问题，在这个项目之前我从来没有任何windows的经验，所有的经验都是以前用windows和google 来的。所以我搜索golang load dll go use static li
— 2 min read
gpg Featured

GPG 的工作原理

原文链接 http://www.pgpi.org/doc/pgpintro The Basics of Cryptography 当 尤利烏斯·凱撒 给他的将军们发送信息的时候，他并不信任他的信使。然后他就把信里的所有字母都向后移3位， A 替换成了字母 D ，所有的 B 替换成 E 等。只有知道 “向后移动三个位置” 的人可以解密出他的信息。这就是著名的 凯撒加密算法。 Encryption and decryption 无需经过特别处理就可以被读取和理解的数据称为纯文本数据或者明文。隐藏纯文本数据真实内容的方法称为 Encryption（ 加密 ），加密后产生的不可读的乱码称为密文。通过加密过程你可以对你想要接受数据之外的人实现数据的保护，就算这个人得到了密文也无法知道真实的内容。将密文转换成明文或者纯文本数据的过程称为解密。图 1-1 描绘的就是这个加密解密的过程。 图 1-1 加密和解密 What is cryptography?
— 44 min read
吃

拉面

在上海待了三年总有些味道是你无法忘记的，不知道什么时候就会突然的想起那股熟悉的味道，指引你去寻找它。 今天下午在看 米兰•昆德拉 [https://zh.wikipedia.org/zh/%E7%B1%B3%E5%85%B0%C2%B7%E6%98%86%E5%BE%B7%E6%8B%89] 的小说[《不朽》]( https://zh.wikipedia.org/wiki/不朽_(米兰·昆德拉)，思考着阿涅丝的问题：一个人的脸其实并不一定代表自己，你喜欢的人的脸，可是那张脸下面可能并不是你，如果你从没有照过镜子的人在生活了20年以后第一次照镜子后，可能发现镜子里的人和你相像的并不一样，这个时候你不得不承认一个事实：你的脸不是你！然后就睡着了，突然间被莫名的惊醒，一看表其实才过了10分钟，却好像是睡了一宿一样。
— 2 min read
美版Kindle

美版kindle如何从亚马逊中国购买电子书

在学校读书的时候我对电子书充满了无限憧憬，觉得能够拥有个Kindle人生才算完整。那是年少无知，书没读多少倒是染上了浮华的毛病。 12年在实习期结束的时候，拿着最后一笔实习期薪水终于在万能的淘宝买了一个Kindle Touch，我还记得那个时候拿到Kindle时候的激动心情，那是一种在儿时拿到父亲给我买一个新玩具时候的心情。
— 3 min read
debug

How To Debug Mobile React Application

最近和朋友做了个好玩的项目颜值俱乐部 [www.crazyapp.net]，使用React做前端开发，我们的定位主要是移动端的web application，所以就需要支持响应式设计，支持移动端等等。这其中就无法避免的涉及到了如何去做好移动端的debug，在debug过程中我主要用到了下面一些工具和方法。 React Devtools 对于调试React Web Application，Facebook提供了一个官方chrome浏览器插件的debug工具，可以从Chrome Store [https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi] 下载，需要注意的是想要使用React Devtools需要在浏览器的window对象上绑定React对象，在代码的最上层执行window.React = require('react');就可以，然后就可以在react-devtools看到这种结构。 从上图可以看到devtool已树形列出了整改应用的Com
— 3 min read
introduce deku
react

introduce deku

deku [https://github.com/segmentio/deku] 是 segment.com [https://segment.com] 公司刚刚发布的开源前端框架，语法和工作原理都和 react [https://facebook.github.io/react/] 极为相像。但是也有很不多不同点，比如更轻量级，但是只支持现代浏览器， 取消了class的概念。 Components 在 React 中每一个component都是一个class，你可以这样 class Button extends React.Component { render() { let {type} = this.props return } } Button.propTypes = { type: React.PropTypes.
— 2 min read
随想

rfs-IV

“先生，我们富余金融提供全球最优质的服务...” "先生您好，我们极速快贷公司提供24小时无间隔快速放款..." “先生，先生，我们 Speed 公司拥有全球顶尖基因工程公司 Genetic 公司的授权，安全快速，还附带感冒抗体...” 树突然发现自己每天走过的这条路似乎和平时并不一样，每天都会路过这条路的树似乎从来没有注意到旁边这些发放广告的年轻人们。他们滔滔不绝的向路人介绍着他们的公司的产品，却鲜有回应。匆匆前行的人们好像从来不会注意到旁边正在发生的任何事情，或者假装根本没有任何事情发生。 旁边穿白色衬衫的瘦小的小伙子似乎注意停下脚步的树，忙小跑着过来。树看着跑向自己的少年，想着似乎是那个叫 Speed 公司的。 “先生，我们公司 Speed 公司拥有世界最先进的基因注入技术，得到了 Genetic 公司在亚洲的唯一授权，绝对安全。” “我们 Speed 公司现在是推广时期24小时内预约都有10%的增值服务，这是我的名片。” “先生，您说这人生跌宕起伏，起起落落哪里没有个跌倒的时候呢，但是关键还是要看跌倒的时候有没有人帮着扶一把，没有人扶着那就是一落千丈。在现在这个时代，没有落井下
— 7 min read
slack

如何使用Slack创建公共聊天室

对于一个公司或者组织来说一个公共的聊天室有助于与你的客户或者社区的成员的交流。在国内大多数人用qq，但是qq只适合聊天对于一些专业的需求支持并不好，不支持markdown等。尤其对于技术社区来说这一点非常让人困扰。在国外现在最火的聊天工具已经不是IRC了，现在是 gitter.im,slack [slack.com]等。 1.gitter.im gitter.im 对技术社区的支持非常好，经常会在github的仓库看到一个绿色的标志链接到gitter.im,但是在国内服务基本被墙得自带梯才能愉快玩耍。 2.slack slack主要面向企业用户但是也提供免费方案，免费用户的服务也很完善。对于一个组织来说slack也可以做到你想要做到的事情。jsconfcn就是使用了slack的免费方案如果想加入jsconfcn了解最新动态可以点击 shenjs on slack [https://shenjs.herokuapp.com]或者关注我们的的github仓库Shenjs [https://github.com/jsconfcn/ShenJS] 2.1 创建一个slack的group
— 2 min read
optimized

Reactjs 性能优化，系列一

引言 ReactJs [http://facebook.github.io/react] 是Facebook开发的一个前端库，介绍ReactJs的文章很多，也可以去ReactJs的主页查看官方文档，文档的内容很少，示例也很详细。 Flux [http://facebook.github.io/flux] 是基于的Reactjs的不能算作前端框架的前端框架，Flux并不提供一个完整的前端框架，只是提供一个Reactjs前端的实现，事实上就是推荐一套应用结构，而不提供具体实现。 前文 在结构复杂的ReactJs Application中，其结构往往都是基于树形结构, 类似与： ------------- App Component --------------- | | | | | | |
— 2 min read
frontend

小小bug

最近在写Reactjs,今天在写项目代码的过程中遇到了一个bug,记录一下. 由于项目的css修改，就去修改其中的一个React Component.然后奇怪的事情发生了，component里的Render方法被执行了两次。 代码如下 修改前 var Demo = React.createClass({ displayName: 'Demo', getInitialState: function () { return { values: [] }; }, handleAdd: function () { var values = this.state.values; values.push(''); this.setState({ values: values }); }, handleReduce: function (i, e) { this.setState({ values: this.state.values.filter(functio
— 2 min read
Nodejs

carcass 快速创建api server 的另一种选择

carcass [https://github.com/devo-ps/carcass] 框架是构建在express connect等模块上的一个restfull api 框架，封装了诸如 deferred等一些非常有用的框架，下面介绍如何使用carcass来快速建立一个node api server。 0.扩展 carcass包含有几个很重要的特性 mixable与mixin 例如 var obj = {}; carcass.mixable(obj); obj.mixin({ start: function() { } }) mixable给一个对象添加mixin方法 mixin类似于一个扩展继承的概念 register obj.mixin(carcass.proto.register); obj.register(path.resolve(__dirname, 'lib')); 通过register 我们就可以通过obj的属性来引用lib文件下的文件 deferred deferred [https://gith
— 2 min read
Android

新特性SlidingPaneLayout

在上一次的android v4 support library [https://developer.android.com/tools/extras/support-library.html]更新中添加了一些新的特性比如： SlidingPaneLayout` `DrawerLayout 等，Google 在新版的Google+客户端中使用了不少新特性. SlidingPaneLayout与DrawerLayout类似效果在github上也有很多优秀的开源库，如Action content view [https://github.com/StevenRudenko/ActionsContentView] SlidingMenu [https://github.com/jfeinstein10/SlidingMenu?source=c] ...这些第三方的库质量也非常高，但是现在Google自己支持了这些特性至于哪个更好还是看各位喜好。 在xml中添加slidingPanel
— 1 min read
Android

ADT 22.0 遇到的奇怪问题

自从升级ADT到 adt-22.0 版本以后出现了两个bug。 Class not found. 各种class not found 的奇怪错误 一开始以为是自己的引用问题，后来排查很久发现不是 解决办法： project-> properties ->Order And Export -> Android Private Libraries #Check之. Project -> clean bug 就不见了。 Ant release taskdef not found 在使用 taskdef 时 代码如下 在新的ADT-22.0下使用 ant release 出现了 taskdef class com.android.ant.XPathTask
— 1 min read
故事

青蛙

故事一 在一片青草碧绿的草地上，一个清澈见底的池塘里生活着一群快乐的青蛙，炎炎的夏日他们互相嬉戏玩耍，饿了就伸出长长的舌头，捕捉飞翔在眼前的昆虫，无忧无虑，仿佛世界只剩下他们的呼唤“呱呱，呱”。可是今年的夏天却再也提不起心情玩耍，每一只青蛙都像病了一样。不!就是病了，因为那清澈的池塘再也不见了，不知道去了哪里，池水开始变的浑浊，散发着难闻的异味。终于有一天池水变黑了，漂浮着，漂浮着叫不上名字的东西，而青蛙们却再也看不见了身影。而空气里只有哄哄的声音夹杂着难闻的异味。 故事二 在另一片青草碧绿的草地上，一个清澈见底的池塘里生活着另外一群快乐的青蛙,在炎炎的夏日里他们同样互相嬉戏玩耍，饿了同样伸出长长的舌头，捕捉飞翔在眼前的昆虫，没有烦恼，想让他们快乐的声音飘荡在世界的每个角落里，“呱呱，呱呱”！可是今天他们再也没有了心情玩耍，池塘里再也看不见了他们欢快的身影，有的只是悲伤。因为他们的家在变小，越来越小，天空也不像以前那般湛蓝，灰蒙蒙的天空就连太阳都无力照射进来。空气中再也没有欢乐的叫声，只有灰尘，只有沙粒。终于有一天碧绿的草地不见了，清澈的池塘不见了，剩下只有一片黄土地，快乐的青蛙
— 3 min read
作文

死鱼

本文系豆瓣阅读末日作文作品 片段一 “噢，真坚强，竟然还活着！”奈川心里想。 奈川对着感叹的是一只垂死的比目鱼，昨日上班的途中，便发现它躺在街边的一个破碎的瓶子里，奄奄一息的状态，仿佛告诉周围的事物：请忘记我的存在，我将离你们而去。或者它根本不想告诉别人什么，因为它清楚的知道，自己的存在与否对这个世界来说都只是一个简单的状态：0或1。或者你根本不知道一只鱼在想什么，因为你不是那只鱼。 奈川觉得应该为这只不想死或者已经死了的鱼做点什么。小心翼翼的捧起支离破碎的玻璃瓶子，生怕自己成了一个收割生命的死神。静静的看着这一寸多长小鱼的奈川，似乎在思考是什么力量在鼓舞着它。 片段二 “奈川，你从哪里捡来的一只死鱼。”公司里的同事A似乎注意到奈川与平时有点不太一样。 “他还活着！”奈川轻声的应到，声音轻轻的，慢慢的，却刚好可以听的清楚。 坐在电脑旁的奈川死死的盯着，桌子上的比木鱼，不知道在想些什么。 “恩！该换个鱼缸了。” 片段三 躺在床上的奈川，目光散漫的盯着天花板，雪白的屋顶一盏白炽灯在努力的发着光芒，屋外本该明亮的下午3点，却一片漆黑。 其实奈川不是他的真名，奈川本名姓林名
— 5 min read
Android

Android自动化实施（2）—服务器上搭建Android环境

继上一篇文章说道编写android Ant编译脚本，脱离IDE编译带来的慢的痛苦。 为了偷懒，必须自动化。 2.如何在服务器中搭建Android环境 服务器中没有ui如何搭建Android环境呢？ 首先将Google提供的Android linux SDK上传到服务器 或者使用curl 直接下载到服务器，高兴用啥就用啥。 解包。必须保证服务器的java环境已经配置好了。没配置好的赶快去yum install 或者 apt-get install 本人也是通过SDK中的REDEAME文件了解到的 可以使用 android update sdk --no-ui 或者 android update sdk -u 这个组命令通过命令行去下载android sdk 但是时去下载会下载全部的包，有些包使我们不需要的，只选择几个必须包就ok 的。 执行 android list sdk 会得到如下的信息 Packages available for installation or update: 19
— 3 min read
Android

Android自动化实施（1）---编写Android自动化脚本

博客主要记录人生 说一说上一周在公司搭建的Android自动化打包实施工程 实施环境 vps 内存 2g cpu 2GHz*2 OS centos 5.1 Android sdk 21 测试主机 OS window7 RTM 1.在本机配置Android自动化编译脚本 对于未使用ant构建Android工程的project须在project的根目录执行以下命令 android update project -p . 会在更目录生成如下两个文件 build.xml`和`local.properties 对于使用ant构建工程可以略过此步骤，对于使用maven构建工程的可以路过这篇文章。。。 修改build.xml中 project name="xxxx"`为`project 在local.properties增加app.project.name=xxx即可 添加自定义编译预处理pre_build.xml文件
— 2 min read
青春

再见，青春！

毕业了，是个雨天，天知道我强忍着悲伤，它在替我流泪。我笑着对自己说天下无不散之宴席，离别还会相见，可是在相见已不知是何时。 不愿最后一个落寞的离开，那就早些离开吧。踏上车的时候我变开始怀念这座城市。在这里我亲手埋葬了我四年的青春年华，与一帮亲们过着悠闲的日子。终于要离开了，我只不过是这座老城的一个过客，没留下什么也没有带走什么 。
— 1 min read