CSS

font-size 的常用长度单位

font-size 是网页开发的过程中 CSS 语言针对字体的一个属性,通常我们在设计一个网页时会使用不同的字体大小,可以方便对应 html 中的不同标签,我们一般作为 Heading 在整个项目中去不断的复用这些 Heading。像诸多设计工具一样,font-size 也有不同的单位,设计常用的单位可能有像素(px)、厘米(cm)等,而在 CSS 中 font-size 常用的单位有 rem、em、px、pt、% 这几种。那么 font-size 的不同单位都有什么不同呢?

iOS Develope

Golang 开发跨平台SDK(iOS, Android),Part 1

**前一篇**介绍了用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。下面是一段Golang代码 package mypkg type Counter struct { Value int

reactjs

React-Native Native Module In Practise

React-Native 是Facebook 开发的一套移动端跨平台开发的框架,其脱胎于 ReactJS 。React-Native允许你使用JavaScript开发移动端的应用,相对于 PhoneGap 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的bridge调用原生库里的方法,最后返回结果。 Setup 需要安装Node.JS和NPM 需要安装Android SDK 和Android Studio https://developer.

windows

一个简单的问题

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

拉面

在上海待了三年总有些味道是你无法忘记的,不知道什么时候就会突然的想起那股熟悉的味道,指引你去寻找它。 今天下午在看 米兰•昆德拉 的小说[《不朽》](https://zh.wikipedia.org/wiki/不朽_(米兰·昆德拉),思考着阿涅丝的问题:一个人的脸其实并不一定代表自己,你喜欢的人的脸,可是那张脸下面可能并不是你,如果你从没有照过镜子的人在生活了20年以后第一次照镜子后,可能发现镜子里的人和你相像的并不一样,这个时候你不得不承认一个事实:你的脸不是你!然后就睡着了,突然间被莫名的惊醒,一看表其实才过了10分钟,却好像是睡了一宿一样。饥饿感充斥着全身,拉面,一股熟悉的感觉。好像就好像许久未见的朋友那样想念。 那起钱包,

美版Kindle

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

在学校读书的时候我对电子书充满了无限憧憬,觉得能够拥有个Kindle人生才算完整。那是年少无知,书没读多少倒是染上了浮华的毛病。 12年在实习期结束的时候,拿着最后一笔实习期薪水终于在万能的淘宝买了一个Kindle Touch,我还记得那个时候拿到Kindle时候的激动心情,那是一种在儿时拿到父亲给我买一个新玩具时候的心情。我感叹包装的精美,惊讶环保包装的设计,由衷赞叹Kindle的设计。也是第一次见到传说中的墨水显示屏。当时的我以最快的速度将Kindle连到电脑上,将我收集的电子书放到Kindle里(原谅都是盗版书,当时情况是没有那么好的电子书市场,我是一直都有购买正版实体书的。)。就是那个时候我看了大仲马的《基督山伯爵》,感叹故事的精妙,基督山的忍辱负重、卧薪尝胆的毅力,也感叹Kindle确实是一件精妙的东西,比手机的屏幕好的太多了,其带来的价值远远超过本书的价值。 后来豆瓣开通了豆瓣阅读可以通过豆瓣阅读直接推送到Kindle上,我以为我的Kindle这下要大展身手了,没想到的时候几个月后豆瓣发了公告说推送Kindle服务被关闭了。Kindle非常完美,可是唯一的遗憾是无法连接到亚马逊中国,无法从亚马逊中国购买中文书籍,我曾经在网络上搜寻无数次,

debug

How To Debug Mobile React Application

最近和朋友做了个好玩的项目颜值俱乐部,使用React做前端开发,我们的定位主要是移动端的web application,所以就需要支持响应式设计,支持移动端等等。这其中就无法避免的涉及到了如何去做好移动端的debug,在debug过程中我主要用到了下面一些工具和方法。 React Devtools 对于调试React Web Application,Facebook提供了一个官方chrome浏览器插件的debug工具,可以从Chrome Store下载,需要注意的是想要使用React Devtools需要在浏览器的window对象上绑定React对象,在代码的最上层执行window.React = require('react');就可以,然后就可以在react-devtools看到这种结构。 从上图可以看到devtool已树形列出了整改应用的Component,并且可以在右边看到每个component的state、props、component自身的方法等,对于debug来说非常有用。 Chrome Mobile Simulator Chrome

随想

rfs-IV

“先生,我们富余金融提供全球最优质的服务...” "先生您好,我们极速快贷公司提供24小时无间隔快速放款..." “先生,先生,我们 Speed 公司拥有全球顶尖基因工程公司 Genetic 公司的授权,安全快速,还附带感冒抗体...” 树突然发现自己每天走过的这条路似乎和平时并不一样,每天都会路过这条路的树似乎从来没有注意到旁边这些发放广告的年轻人们。他们滔滔不绝的向路人介绍着他们的公司的产品,却鲜有回应。匆匆前行的人们好像从来不会注意到旁边正在发生的任何事情,或者假装根本没有任何事情发生。 旁边穿白色衬衫的瘦小的小伙子似乎注意停下脚步的树,忙小跑着过来。树看着跑向自己的少年,想着似乎是那个叫 Speed 公司的。 “先生,我们公司 Speed 公司拥有世界最先进的基因注入技术,得到了 Genetic

slack

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

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

optimized

Reactjs 性能优化,系列一

引言 ReactJs是Facebook开发的一个前端库,介绍ReactJs的文章很多,也可以去ReactJs的主页查看官方文档,文档的内容很少,示例也很详细。 Flux是基于的Reactjs的不能算作前端框架的前端框架,Flux并不提供一个完整的前端框架,只是提供一个Reactjs前端的实现,事实上就是推荐一套应用结构,而不提供具体实现。 前文 在结构复杂的ReactJs Application中,其结构往往都是基于树形结构, 类似与: ------------- App Component --------------- | | | | | | | | Message Project Other ... | | | ------ ------ ------ | | | | | | 在App Component中通常我们会有 在上面的示例代码中,App Component 去监听AppStore的改变,然后在onChange中去改变App

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: