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

拉面

在上海待了三年总有些味道是你无法忘记的,不知道什么时候就会突然的想起那股熟悉的味道,指引你去寻找它。 今天下午在看 米兰•昆德拉 [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