Home

Flutter开发的2048游戏

Flutter是Google推出的移动UI开发框架,是开源和免费的。可以快速在iOS和Android上构建高质量的原生用户界面。最早在今年2月份的可Google开发者大会上推出了第一个Beta版。现在已经有越来越多的开发者和公司在使用。

Flutter自从推出以来就受到了广泛的关注,目前在 Github 上已经有37000多 Star 了,国内的很多公司也开始尝试使用了Flutter,像阿里的闲鱼团队已经将商品的详情页改用Flutter来开发了。

Flutter 的主要优点:

  • 运行速度快,最终会编译成原生代码运行,不像 React Native 需要 Javascript 来桥接。

  • 热重载(Hot Reload),修改代码保存后可以立即看到修改效果,极大的缩短了开发和调试的时间。

为了了解Flutter 的使用和开发,用 Flutter 实现了一个简单的2048的游戏,对 Flutter 有了一个初步的了解,由此感觉 用 Flutter 进行开发还是非常容易上手的。

游戏截图如下

代码详见: Github

关于Flutter 的开发文档可以看官方文档,中文文档可以参见Flutter中文网

Read more

康威生命游戏的js+html5实现

生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机(百度百科:生命游戏)。

生命游戏的规则非常简单:

  • 生存规则:8个邻格中有2-3个“邻居”的自动机可以存活到下一回合
  • 死亡规则:8个邻格中有4个或以上“邻居”的自动机在下一回合死于人口过载;1个或以下“邻居”的自动机在下一回合死于孤独
  • 出生规则:8个邻格中有3个“邻居”的空格子在下一回合生出一个新的自动机

虽然规则很简单,但是会产生一些有趣的演化,我觉得是一件很好玩的事情。所以用js和h5的canvas实现了一个。

Read more

Mac OS X 上的ldd和strace的替代

Linux下经常会用到ldd查看程序使用了哪些共享链接库,很方便的一个工具,在Mac OS X上没有这个命令,如果想在Mac OS X查看程序使用了哪些链接库可以用otool 来代替。

例:

Read more

提高stackoverflow.com访问速度的非常有效的技巧

做为一个程序员,stackoverflow.com是访问频率很高的一个网站,可是国内的网络环境导致访问stackoverflow.com时慢如蜗牛,有时干脆打不开,实在无法忍受,当然翻墙或许可以解决这个问题,前提是你得有翻墙的条件。另外翻墙通常使用国外的代理,访问速度未必快。

为了尝试提高一下访问速度,于是乎打开了浏览器开者工具观察下到底是什么原因导致访问速度如此慢,经过了漫长的等待之后,查看了网页中资源的请求时间,结果发现了几大元凶:

0CEE16D0-C4DC-42E1-903C-3038C2104032

不看不知道,一看吓一跳,看看加载时间简直惊待了。

虽然这些资源没有成功加载,但是网页要查看的内容没有受太大影响。分析下这些被阻止的内容:

www.gravatar.com 主要是加载的头像资源,我们访问stackoverflow.com的目的是查看问题,这个头像有没有无所谓了,另外graph.facebook.com也是加载的头像。

ajax.googleapis.com 这是google的api在线资源库,里面包含了像jquey等常用的js库,很多国外的网站都采用了ajax.googleapis.com上的资源来提高访问速度。

既然没有加载也没有影响内容的查看就干脆屏蔽掉吧,在主机列表中(像osx、linux的主机文件为/etc/hosts, windows系统下在C:\WINDOWS\system32\drivers\etc中)添加如下:

127.0.0.1 www.gravatar.com
127.0.0.1 graph.facebook.com
127.0.0.1 ajax.googleapis.com

保存后再重新打开(windows修改完了可能要禁用网卡再重新启用才会生效)stackoverflow.com看下,是不是速度提高了很多?原理就不用再解释了吧。。。终于可以愉快的访问stackoverflow.com了。

另外建议再加上以下几个:

127.0.0.1 0.gravatar.com

127.0.0.1 1.gravatar.com

127.0.0.1 www.google-analytics.com

这种方法不仅对stackoverflow.com有效,你会发现加上这个之后很多国外网站访问速度变快了!像wordpress的博客网站默认会启用gravatar.com的头像,这个速度提升也很明显。

看到这里有的童鞋可能会问了,如果头像屏蔽就屏蔽了,可是像ajax.googleapis.com这种有些网站不加载里面的jquey之类库是无法正常使用的,在不翻墙的情况下有没有办法解决呢?其实问题一出现可能很多人已经想到解决办法了,域名的ip可以随便指向了,那么只要把ajax.googleapis.com指到有这些资源的ip上即可。最简单的方法是找一台主机把资源都放上面,然后在主机表中指定一下就OK。需要注意的地方就是,很多网站上链接的ajax.googleapis.com是用的https,所以还需要主机支持https访问。如果你的主机没有https证书也不用担心要花钱买,可以在服务器端自己生成一个,然后导入本地即可。细节就不再阐述了。

Read more

html5+javascript画谢尔宾斯基三角形

谢尔宾斯基三角形(Sierpinski triangle)是一种分形,由波兰数学家谢尔宾斯基在1915年提出。

我们来看一下这个谢尔宾斯基三角形的实现步骤:

1. 画一个三角形(通常为等边三角形)

2. 假设上面的顶点为a,左边的点为b,右边的为c

选出三条边的中间点,a-b,a-c,b-c,画三个三角形

a a-b a-c

a-b b b-c

a-c b-c c

222

3.对新画出的三个三角形按步骤二继续绘制(递归的过程),直到你认为绘制的三角形足够小。

把以上的步骤理解清楚以后,就很容易实现,递归的思想用递归来实现是最合适不过了。

Read more

用Nginx实现负载均衡

由于Nginx的简单轻巧,如今越来越多的人采用Nginx当作Web服务器,Nginx除了可以当作web server之外,还可以利用Nginx来实现负载均衡,用Nginx来配置http(或https)的负载均衡也非常简单。

Nginx的负载均衡支持以下几种方式:
round-robin — 简单轮询(默认方式)
least-connected — 最少活跃链接数(基本就是相对来说谁最闲就分配给谁)
ip-hash — 根据IP进行哈希(请求来源的IP)

举例说明,假设后台有3台服务器用户处理用户的请求,用Nginx来实现负载均衡:

基本配置
1.round-robin方式:

http {
    upstream myapp1 {
        server srv1.example.com;
        server srv2.example.com;
        server srv3.example.com;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://myapp1;
        }
    }
}

当有用户请求时,Nginx会采用round-robin方式来分配各个请求到3台服务器上。

2. least-connected方式:

http {
    upstream myapp1 {
        least_conn; #注意是least_conn不是least_connected
        server srv1.example.com;
        server srv2.example.com;
        server srv3.example.com;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://myapp1;
        }
    }
}

3. ip-hash

http {
    upstream myapp1 {
        ip_hash;
        server srv1.example.com;
        server srv2.example.com;
        server srv3.example.com;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://myapp1;
        }
    }
}

以上三种实现方式中,round_robin和least_conn不能保证同一用户的请求会发送到同一服务器上,如果你的服务中用到了Session的话,就需要考虑Session分布的问题。通常的解决办法是将Session统一存储,比如用Memcache或数据库存储。
如果采用ip_hash可以将同一用户的请求发到同一台机器上。

除了上面的配置以外,Nginx还支持给每台服务器设置权重:
比如:

http {
    upstream myapp1 {
        ip_hash;
        server srv1.example.com weight=3;
        server srv2.example.com;
        server srv3.example.com;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://myapp1;
        }
    }
}

在srv1中加了一个权值3,这样分配给srv1的请求数将是其它机器的3倍,比如有5个请求,会分给srv13个,srv2和srv3各一个。

least_conn和ip_hash也同样支持权重分配,配置方法和上面一样。

错误检测

Nginx在分配任务时会查看(被动)各台服务器的运行状态,如果分配给某台服务器的请求没有正确响应那么,Nginx会将该机器暂时标为不可用(请求仍会分配给其它服务器),可以通过max_fails参数(默认为1)来设置最大重试次数,用fail_timeout(默认为10s)来设置超时时间。

如:

http {
    upstream myapp1 {
        ip_hash;
        server srv1.example.com max_fails=2 fail_timeout=30s;
        server srv2.example.com;
        server srv3.example.com;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://myapp1;
        }
    }
}

max_fails=2 fail_timeout=30s意思是在30秒内,连接该服务器连续2次失败,刚在接下来的30秒内,不再分配新的请求给这台机器(30秒之后新请求会重新尝试分配给该服务器)。

如果设置max_fails=0,那么Nginx不检测这台机器的状况。

如果想让某台机器下线,可以设置成down,如下:

http {
    upstream myapp1 {
        ip_hash;
        server srv1.example.com max_fails=2 fail_timeout=30s;
        server srv2.example.com down;
        server srv3.example.com;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://myapp1;
        }
    }
}

以上是使用Nginx做负载均衡的基本配置,其它详细的用法请参考Nginx手册。

Read more

svn中操作带有"@"符号的文件

如果在命终端中用svn命令操作文件名中有“@”符号的文件(ios开发的朋友应该很清楚),会遇到:
svn: E205000: Syntax error parsing peg revision '3x.png'
或者:
svn: E200009: 'welcome1@3x.png': a peg revision is not allowed here
类似的错误提示,原因是因为svn命令把文件名中的@识别成有其它含义的特殊字符,导致操作失败。
解决办法:
在使用svn命令时在文件名尾部再添加一个“@”即可解决。
比如 要查看welcome1@3x.png文件信息:
svn info welcome1@3x.png@

Read more

jpg和png图片的无损压缩工具

网站和APP中通常包含大量的图片素材,减少图片的大小可以改善网页的加载速度、减少APP的包大小。这里介绍两个比较有效的jpg和png的无损压缩工具。

1. jpegtran

jpegtran 是专门针对jpg图片的无损压缩工具,支持linux、osx、windows等平台,基本用法:

比如要压缩yy.jpg后重新存成xx.jpg,命令如下:
jpegtran -optimize -progressive -copy none -outfile xx.jpg yy.jpg
比如要针某个目录下的所有jpg进行压缩可以使用:
find path -name "*.jpg" -exec jpegtran -optimize -progressive -copy none -outfile {} {} \;

2. optipng
optipng 是专门png图片的无损压缩工具, Google Chrome的Pagespeed 插件中对png图片的无损压缩就是用的这个工具,同样支持多种平台,基本用法:
optipng -strip all xx.png
批量压缩:
find path -name "*.png" -exec optipng -strip all {} \;
具体参数的详细说明请参考man手册。

这两种工具对基本素材类的图片压缩比例非常可观,因为是无损的,所以不用担心图片质量的损耗。

Read more