Velocity 2013个人笔记

2013年8月25日 1 条评论

有幸去Velociy 2013 Web性能与运维大会打了一天酱油,在此记录收获感言一二。由于不是自己的东西,不做详述,只记录自己重点笔记的和感悟的。

上午主题分享来自3个老外,一个广告分享被忽略了- -

  • 预处理CSS
  • 浏览器中的Javascript性能
  • 走自己的路——有时候Web架构一定是不同的

第一个主要是介绍SASS的一些特性(变量、嵌套、mixin等),其应用运用OOCss后的一些数据效果体现,稳抓稳打的分享。
第二个也一般,印象深刻的就是强调了下结构、样式、行为分离,变量缓存一切需要用到的资源,例如Dom对象、属性值等。
不推崇前端模版,比server端渲染慢很多(点击博文),追求极致性能可参考,不过spa的、RESTFUL接口的应用,使用前端模版还是便利些。
第三个还不错,讲了很多case,分享人也很看中互动,可惜尴尬的是其应用场景我们不熟,没有直观的感受,如果是阿里人来讲双11遇到的一些同样的问题,估计会更感同身受一些。

百度前端性能优化基础服务

主要内容如下:

  1. 前端性能优化整体规划
  2. 指标体系
  3. 监控系统功能和实现
  4. 性能分析工具pagecheck
  5. 性能优化实践
  6. 问题和新挑战

印象深刻的:If you can’t measure it, you can’t manage it.

核心指标:衡量用户真实体验
原则:相关时间很难做到绝对精确
全量or采样:采样,保证20w
采集是否影响性能:小、动态上载、基本无影响

数据加工
均值:去掉长尾
分布区间:精确到每50ms的用户比例
多维细分数据:浏览器、机型
慢速用户的构成,针对性的做优化

收集竞品数据,提供周报&报警,慢速用户分析.(该功能超赞,报表只有在需要的时候大家才会进行关注,预警功能将提醒开发人员注意异常情况,该异常可能不会造成服务中断,抑或非业务逻辑错误,所以普通监控无法覆盖,但却会极大的影响用户体验)

最后百度牛尧同学分享了几个内部性能优化工具(有一个内部使用,非开源),让浏览器不再是黑盒!

百度的整个前端架构自成体系,完善的打点、优化、工具、平台等基础设施,都是沉淀下来的优质资源。

残酷KPI下的极致优化——淘宝和天猫网首页优化实践

该分享是我认为今天最出彩的讲演,作为曾经的阿里人,能够感受到阿里人的那份热情、乐观。

事情起源于几个高阶开发和总裁的一次对赌,目标为:2013淘宝首页和天猫首页综合性能指标要比2012快一倍。经过多年洗礼,首页性能已经锤打过多次,此次挑战难度不可谓不大,旁观者一听都有热血沸腾之感。

杜欢同学娓娓道来了每一个策略以及随后的数据。有些不仅仅是技术策略的问题,很多业务推动、协作、谈判技巧,引人深思。先列出笔记重点。
o 首屏最小化(减少dom数,请求数,外链数)
o 减少页面整体大小
o 提前Dom ready
o 提前onload
o 减少load后的事件
o 协议自适应(减少html大小!赞)
o 优化html书写顺序(减少GZip大小,属性位置,会影响 gzip 压缩 如 id,href的位置)
o DNS prefetch
o head 尽少资源(白屏)
o 减少DNS Lookup
o 让首屏的可视区域尽快显示,提前加载部分资源
o 广告和涉及金钱部分的优化 (做好回滚备案,涉及到收益的部分,总是要慎重,没有人不踩坑的
o 本地存储
o 更新机制和兼容方案
o 分首屏线,定锚点检测
o 首屏后dom ready后加载
o 监控- – 无所不用其极,去掉了自己的监控,使用第三方
o 关键业务调整的时候,谈判技巧。站在业务方的角度想这个方案
o big render里面放异步script,减少html大小
o 调整首屏线且 onload+onscroll 加载(dom ready 换成 onload)
o 首焦第1/5是自己业务(非广告位),替换成75%品质的图片,展开谈判
o 二屏onload+onscroll 变成 onsroll加载
o dns-prefetch + 协议自适应(无http://)

有些策略真是精细到令人发指,两次调整缩小首屏线不禁让人莞尔,几次展开的业务谈判,也需要很大的技巧和推动能力。这就是KPI带来的压力转化而成的执行力。有时候不禁感慨良多,KPI已经过街老鼠,人人都在兜售不要为了KPI而KPI,但是前、没有KPI的导向,感觉方向迷茫,步伐紊乱。

最终天猫首页指标从8s多降至4s之下,顺利完成任务,令人拍手叫绝。

天猫的优化策略类似,只不过本来已经很快了,优化点主要在图片上。另外提出了一个smart load的概念,预测用户行为,智能加载。
一个经典case:amazon菜单栏的鼠标轨迹三角判断,判断是否要到子类目or离开去其他平级目录。

几个分享的共通点,都建立在有一套稳定的全面的打点、监控系统之上。目前公司也有统一的数据部门,因为是通用平台,且沉淀积累太少,响应慢功能少,不是太好用,想自己接入分析日志,构建和谐UI系统的打算,提高数据平台的响应速度,提供更友好的交互界面,提供简单自定义任务功能,让PM也能简单制作分析脚本。

监控指标

Time to First Byte 服务端返回时间
Time to Start Render 白屏结束时间
Time to Interactive 用户可交互时间(important)
Time to Document Ready 文档加载完成时间
分类: 前端 标签:

ubuntu下gitosis的安装

2012年6月14日 没有评论

参考 ubuntu wiki上的文章: Git服务器Gitosis安装设置

毫无疑问,工具的安装过程中总是会出现教程未提及的错误处理,解决起来很是麻烦,在此记录一二,也许对未来人有帮助。

1 获取并安装gitosis

教程里是 git clone git://eagain.net/gitosis.git,但是我clone不下来,于是取github上获取,项目地址:https://github.com/res0nat0r/gitosis.git

2 gitosis 安装后,会有3个可执行命令生成到 /usr/local/bin 下

gitosis-server gitosis-ini gitosis-run-hook

但是安装过程中提示 bash: gitosis-serve: command not found 等错误,解决方案

软链这几个命令到  /usr/bin 目录之下。

3 gitweb安装之后,倒不用像 wiki 里面那么复杂的配置

<VirtualHost *:80>
        ServerName www.yooshang.com
        ScriptAlias /gitweb/ /usr/lib/cgi-bin/
        DirectoryIndex /gitweb/gitweb.cgi
        DocumentRoot /home/git/gitweb
</VirtualHost>

设置了 gitweb 的解析路径为 /home/git/gitweb 把,gitweb需要引用的静态资源软链到此路径

sudo vi /etc/gitweb.conf 修改 $projectroot 改为git仓库存储目录(例如:/home/git/repositories),apache进程需要有该路径的755权限,
那么所有的可读项目都会暴露出去了,不好控制。
所以我的做法是在gitweb创建一个 repositories 目录,我需要在 gitweb 展示的仓库,则软链到 repositories 路径下。
分类: 工具 标签:

emacs下的less-mode

2012年6月12日 2 条评论

在淘宝的时候就调研过less,一个强大的 CSS 预处理器,但是一直没有整合到项目里。

实践才能出真知,宇宙最新、最强的东西一定要一股脑塞进mss项目里去。

less项目相关

github上的less.js项目,相关使用教程:http://lesscss.org/ (需要翻墙)

emacs下的less文件编辑

emacs下的css-mode无法满足less的嵌套对齐问题,纠结,不过强大的github应该有less-mode的实现,否则我也乘机学习下lisp整一个出来?哈,没那么简单。

运气不错,github上的emacs下less-mode插件

下载 less-mode.el 添加进emacs的配置路径,在 .emacs 添加以下配置

(require 'less-mode) 
(add-to-list 'auto-mode-alist '("\\.less$" . less-mode))

If you use smart-compile:

(add-to-list 'smart-compile-alist '(less-mode . (less-compile)))

If you use Flymake, it will work automatically.

该扩展支持:保存文件时候的自动编译

之前一直臆测,coffeescript,lesscss 服务端编译的话,每次调式都得手动执行编译命令,岂不是非常的烦?

强大的emacs,保存时自动编译可以成为解决方案之一,完全不会有开发时候的不爽呀。

例如:less/xx.less -> css/xx.css, 项目引用 css 路径下的文件,真实编辑的文件是 less 路径下对应的文件。

less-mode.el 继承的也是css-mode, 依旧有缩进的问题,elisp又不熟悉,只能简单的调整了下,不要css-mode的关键词高亮了,能对齐就好了。

改动的地方很少,

(define-derived-mode less-mode css-mode "Less" 
改为 
(define-derived-mode less-mode c-mode "Less"

并添加了2个缩进设置

(c-set-offset 'label' +)
(c-set-offset 'defun-close' /)

根据个人习惯改变了编译命令,会自动的把less文件编译并压缩到css路径

/home/yoo/music/public/less/css.less -> /home/yoo/music/public/css/css.less.css

完整的内容如下:

(require 'derived)
(require 'compile)

(defconst less-font-lock-keywords
  '(("@[^\s:;]+" . font-lock-constant-face)
    ("//.*$" . font-lock-comment-face)))

(defgroup less nil
  "Less mode"
  :prefix "less-"
  :group 'css)

(defcustom less-lessc-command "lessc --no-color"
  "Less compiler command"
  :group 'less)

(defcustom less-lessc-command-c "lessc --no-color -x"
  "Less compiler command"
  :group 'less)

(defcustom less-compile-at-save t
  "If not nil, Less buffers will be compiled on each save"
  :type 'boolean
  :group 'less)

(defcustom less-mode-hook nil
  "Hook run when entering Less mode"
  :type 'hook
  :group 'less)

(defun less-compile ()
  "Compiles the current buffer"
  (interactive)
  ;;(compile (concat less-lessc-command " " buffer-file-name))                                                                                                            
  (compile (concat less-lessc-command-c " " buffer-file-name " > " (replace-regexp-in-string "/less/" "/css/" buffer-file-name) ".css")))

(defun less-compile-maybe ()
  "Runs `less-compile' on if `less-compile-at-save' is not nil"
  (if less-compile-at-save
      (less-compile)))

(defun flymake-less-init ()
  (let* ((temp-file (flymake-init-create-temp-buffer-copy
                     'flymake-create-temp-inplace))
         (local-file (file-relative-name
                      temp-file
                      (file-name-directory buffer-file-name))))
    (list "lessc" (list "--no-color" local-file))))

(when (featurep 'flymake)
  (add-to-list 'flymake-allowed-file-name-masks
               '("\\.less$" flymake-less-init))
  (add-to-list 'flymake-err-line-patterns
               '("! \\(.*\\): on line \\([0-9]+\\): \\(.*\\)"
                 nil 2 nil 3))
  (add-to-list 'flymake-err-line-patterns
               '("! \\(.*\\): \\(.*\\)"
                 nil nil nil 2)))

(define-derived-mode less-mode c-mode "Less"
  "Major mode for editing Less files, http://lesscss.org"
  (run-hooks 'css-mode-hook)
  (c-set-offset 'label' +)
  (c-set-offset 'defun-close' /)
  (when (featurep 'flymake) (flymake-mode t))
  (font-lock-add-keywords nil less-font-lock-keywords)
  (add-hook 'after-save-hook 'less-compile-maybe nil t))

(provide 'less-mode)
;;; less-mode.el ends here
分类: emacs 标签: ,

捉鬼游戏帮助

2012年5月2日 5 条评论

清明节去浙江舟山旅游的时候,同学教会了一个游戏,叫捉鬼,玩的挺有意思的,于是用51的时间用nodejs和socket.io简单开发了一个在线版,网址 http://zg.yooshang.com,游戏的规则感觉挺简单的。

规则:

1 人群里每个人都分配到一个词语

2 其中只有一个人的词和别人的不一样

3 大家通过每一轮的轮流阐述,找到鬼的存在,

4 而是鬼的人,需要通过别人的描述判断出自己是鬼,然后进行伪装

 

简单模式只有2种角色:

人 — 大部门的玩家都是人,他们有一样的词语A。

鬼 — 只有一个人是词语B

 

胜利条件:

鬼 — 剩余玩家数<=2,鬼赢得比赛。

鬼被指认后死亡,但是猜对了“人”的词语A,鬼赢得比赛。

人 — 揪出鬼,并不能让鬼猜出自己的词语!

 

流程:

1 系统随机分配每个人的角色

2 可以选择系统随机出题,或者某一个玩家出题,出题的玩家将不能参与之后的比赛。

3 系统随机阐述顺序

4 按照顺序,每个人对自己拿到的词语进行阐述,如自己是“花生”,可以说:“白胖子”

5 第一次描述两轮,触发指认环节,之后就是每一轮描述都会触发指认环节。

6 指认环节就是投票,选择自己认为是鬼的玩家。

7 得票多者将死亡。

8 如果死亡的是“人”,且未达到胜利条件,游戏继续。

9 死亡者是“鬼”,则鬼有一次猜词机会。

10 开始下一轮游戏。

 

界面帮助:

可以自己建一个房间,然后邀请朋友们一起来玩游戏。捉鬼应该是和认识的人玩,一个圈子的人玩才有意思,所以没有暴露出已经存在的房间。

进入房间后,需要输入昵称,点击左侧的图片可选择头像。

点击查看大图

整个界面的功能导图。

功能区会有 准备、开始、系统出题、出题等按钮,游戏进行时,会切换成发言队列,高亮的为当前发言人,发言完毕之后会有声音提示。

捉鬼的乐趣在于和朋友们一起玩,因为有共同的话题,这样才能出一些比较契合的题目。

比如一堆程序员,分配到 nosql 和 mysql,也是蛮好玩的。

技巧:

多数派在发现同伴之后,要把鬼误导到错误的胡同里,让他猜不到词语。

少数派的鬼,要仔细推敲多数派的词语,在已经大致猜到词语后,要混进多数派里。

这个度就是乐趣所在了。

经典案例:

 

Have fun!

 

 

分类: 未分类 标签:

Linode VPS OpenVPN安装配置教程(基于Debian/Ubuntu)

2012年4月6日 没有评论

转载至:VPS侦探  链接地址:http://www.vpser.net/build/linode-install-openvpn.html

因为众所周知的原因,目前Gmail等相关服务原来越不稳定,虽然可以通过SSH来解决,但是打开网站一多SSH也有些力不从心,VPS侦探以前发表过在Linode VPS安装PPTP VPN的教程,相对于PPTP来说OpenVPN加密型更强,而且穿透性更强。

本教程也适用其他的基于Debian/Ubuntu Linux的VPS/服务器,也已在DiaHostingVPSYOUPhotonVPS123Systems、oplink上测试通过,如有问题欢迎反馈。(Linode购买及测试教程:http://www.vpser.net/usa-vps/linode.html

1、安装

apt-get install openvpn udev lzop

2、使用easy-rsa生成服务端证书

将OpenVPN所需的配置文件复制到/etc/openvpn/下面:

cp -r /usr/share/doc/openvpn/examples/easy-rsa/ /etc/openvpn/

生产CA证书:

cd /etc/openvpn/easy-rsa/2.0
source vars
./clean-all
./build-ca

./build-ca时会提示输入一些信息,可以都直接回车按默认信息。

生成服务器端证书和密钥,server为名字可以自定义:

./build-key-server server

此步也是会提示输入一些信息,前面的信息直接回车按默认信息,提示Sign the certificate? [y/n]:时输入y,提示1 out of 1 certificate requests certified, commit? [y/n] 也是输入y。

生成客户端证书和密钥,client为名字可以自定义,注意前面的./build-key-server与./build-key client输入的名字不能相同:

./build-key client

前面的信息直接回车按默认信息,提示Sign the certificate? [y/n]:时输入y,提示1 out of 1 certificate requests certified, commit? [y/n] 也是输入y

生成其他的客户端就是执行:./build-key 你想添加的客户端的名字。

生成的证书和密钥存放在/etc/openvpn/easy-rsa/2.0/keys/下面。

生成Diffie Hellman参数:

./build-dh

3、配置OpenVPN服务

编辑/etc/openvpn/server.conf 文件,如果没有可以创建一个,加入下面的内容:

local 服务器IP
port 8080    #端口,需要与客户端配置保持一致
proto udp    #使用协议,需要与客户端配置保持一致
dev tun         #也可以选择tap模式
ca /etc/openvpn/easy-rsa/2.0/keys/ca.crt
cert /etc/openvpn/easy-rsa/2.0/keys/server.crt
key /etc/openvpn/easy-rsa/2.0/keys/server.key
dh /etc/openvpn/easy-rsa/2.0/keys/dh1024.pemifconfig-pool-persist ipp.txtserver 10.168.1.0 255.255.255.0    #给客户的分配的IP段,注意不要与客户端网段冲突!push "redirect-gateway"

push "dhcp-option DNS 8.8.8.8"
push "dhcp-option DNS 8.8.4.4"
client-to-client

;duplicate-cn

keepalive 20 60

comp-lzo

max-clients 50

persist-key
persist-tun

status openvpn-status.log
log-append openvpn.log
verb 3
mute 20

按上述说明修改服务器IP,复制到VPS上是可以把注释信息删除。

安装iptables

apt-get install iptables   #如果已经安装可以跳过

设置IP转发

iptables -t nat -A POSTROUTING -s 10.168.0.0/16 -o eth0 -j MASQUERADE
iptables-save > /etc/iptables.rules

上面的eth0要替换为你的网卡标识,可以通过ifconfig查看。

在/etc/network/if-up.d/目录下创建iptables文件,内容如下:

#!/bin/sh
iptables-restore < /etc/iptables.rules

给脚本添加执行权限:

chmod +x /etc/network/if-up.d/iptables

修改/etc/sysctl.conf的内容为:

net.ipv4.ip_forward = 1
net.ipv4.conf.all.send_redirects = 0
net.ipv4.conf.default.send_redirects = 0
net.ipv4.conf.all.accept_redirects = 0
net.ipv4.conf.default.accept_redirects = 0

重新载入/etc/sysctl.conf使其生效,执行如下命令:

sysctl -p

重启OpenVPN及网络:

/etc/init.d/openvpn restart
/etc/init.d/networking restart

4、安装配置OpenVPN客户端

下载客户端

打开http://openvpn.net/download.html,点击Windows Installer后的链接,下载OpenVPN Windows客户端。

下载完成后,安装,安装中的选项全部按默认即可。

下载客户端证书及密钥:

证书和密钥存放在/etc/openvpn/easy-rsa/2.0/keys/下面,可以使用winscp链接到VPS上下载。

将/etc/openvpn/easy-rsa/2.0/keys/下面的ca.crt、client.crt、client.key下载到C:\Program Files\OpenVPN\config 下面。

创建客户端配置文件

在C:\Program Files\OpenVPN\config 下面创建一个linode.ovpn的文件,添加如下内容:

client
dev tun       #要与前面server.conf中的配置一致。
proto udp              #要与前面server.conf中的配置一致。
remote 服务器IP 8080    #将服务器IP替换为你的服务器IP,端口与前面的server.conf中配置一致。
resolv-retry infinite
nobind
persist-key
persist-tun
ca linodeca.crt
cert linodeclient.crt
key linodeclient.key
ns-cert-type server
redirect-gateway
keepalive 20 60
#tls-auth ta.key 1
comp-lzo
verb 3
mute 20
route-method exe
route-delay 2

5、OpenVPN客户端连接测试:

运行OpenVPN GUI,会在屏幕右下角的系统托盘区,会显示右击该图标,会在菜单中出现我们添加的服务器,点击Connect,OpenVPN客户端就会开通链接OpenVPN服务器,过一会儿,OpenVPN图标变成绿色就是链接成功了。

如果想实现国内网站不走VPN,国外网站走VPN可以看一下:http://code.google.com/p/chnroutes/wiki/Usage 这个教程。

如有问题欢迎反馈,或到VPS论坛交流。

 

在自己的linode vps搭建成功,成功翻墙~

分类: 工具 标签:

【收集】html5中audio标签的事件、方法和属性

2012年2月9日 没有评论

audio标签属于html5中的媒体标签,所以具有html5中的所有媒体事件。事件类型如下表所示。

事件 描述
canplay 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
canplaythrough 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
durationchange 当媒介长度改变时运行脚本
emptied 当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本
ended 当媒介已抵达结尾时运行脚本
error 当在元素加载期间发生错误时运行脚本
onloadeddata 当加载媒介数据时运行脚本
loadedmetadata 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
loadstart 当浏览器开始加载媒介数据时运行脚本
pause 当媒介数据暂停时运行脚本
play 当媒介数据将要开始播放时运行脚本
playing 当媒介数据已开始播放时运行脚本
progress 当浏览器正在取媒介数据时运行脚本
ratechange 当媒介数据的播放速率改变时运行脚本
readystatechange 当就绪状态(ready-state)改变时运行脚本
seeked 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
seeking 当媒介元素的定位属性为真且定位已开始时运行脚本
stalled 当取回媒介数据过程中(延迟)存在错误时运行脚本
suspend 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
timeupdate 当媒介改变其播放位置时运行脚本
volumechange 当媒介改变音量亦或当音量被设置为静音时运行脚本
waiting 当媒介已停止播放但打算继续播放时运行脚本

 

audio标签的方法

html5中的媒体标签所提供的方法很简单,如下。

  1. p.load();
  2. p.play();
  3. p.pause();
  4. p.stop();

 

audio标签有如下几个属性

属性 描述
src 音频文件的url地址
preload 是否自动预加载,在设置了autoplay属性时此属性无效。
autoplay 自动开始播放
loop 循环播放
controls 显示浏览器默认播放控制器

 

必读文章:

Unlocking the power of HTML5 <audio>

释放 HTML5 <audio> 的力量

分类: 未分类 标签:

hostCenter firefox插件开发

2011年9月12日 没有评论

中秋三天闲来无事,作为一个寂寞的coder,给自己制定了个计划:学习firefox插件开发。

一直想做一个这样的应用,场景如下:

  • 项目A开发过程中,需要告之其他开发人员开发环境host;
  • 项目A测试过程中,需要告之其他开发人员、测试人员、产品等测试环境host;
  • 项目A预发、上线等过程中,需要告之所有人预发环境、线上测试环境host等。

每个人都接收到指令后去配置自己的host,反正我host文件是已经混乱不堪了。

如果有一个hostCenter配置中心,只要一个人维护一个列表,并书于比较明确、区分的注释,那么之后每个开发、测试、产品只需点击一下,即可修改host并打开对应页面。

ok,开发一个这样的firefox插件,走起。

mozilla现在有了一个在线插件开发的工具jetpack,真是imba到极致:

Mozilla Lab Jetpack:开发 Firefox 扩展的新方法,也就是 Add-on SDK, 它不再依赖 XPCOM、XUL,而是采用了 HTML、CSS、JavaScript。和 Chrome、Opera 的扩展开发类似。这里,Add-on SDK 和 Chrome 都使用 JSON 描述扩展元数据,而 Opera 使用 XML。现在应用扩展都在走 Web 路线。

ok,入口在下:

主页:https://builder.addons.mozilla.org/

手册:https://addons.mozilla.org/en-US/developers/docs/sdk/1.0/packages/addon-kit/addon-kit.html

仅仅这些api,对于我们的需求来说不够用的,不过我还是可以用html、css的,免得去学xul,

于是require了基本的api后,download一个框架版,自己添加xpcom的调用逻辑,才有权限修改host文件。

xpcom接口:https://developer.mozilla.org/en/XPCOM_Interface_Reference

捣啊捣啊捣啊捣,over了,产出如下:

点击后news.163.com lz.taobao.com 这2个域名都将指向10.0.0.4, 并立即新开一个页面,域名是第一个news.163.com (考虑到一些 api host是放在页面host后面的)。

点击配置按钮后打开以下panel:

默认向 http://localhost/test.js去请求json格式的host列表,可以修改该配置,该配置会保持在 simple-storage里。

分类: 前端 标签: , ,

在Linode上配置自己的VPN

2011年4月9日 1 条评论

Linode每个月有200G的流量,一般来说是用不完的。
正好看到网上有人把Linode拿来做VPN所以就试试,用来翻墙的确不错。

我的邀请链接 http://www.linode.com/?r=4dbccaa4666de68bea3c3332b73fe14baec9f3d5

更新软件包数据
apt-get update

安装pptpd
apt-get install pptpd

设置本地地址和远程地址范围
修改/etc/pptpd.conf文件
localip 192.168.0.1
remoteip 192.168.0.234-238,192.168.0.245
注意:如果是Ubuntu的系统此处请将logwtmp注释掉,否者无法登录vpn
网上的一些方法说在/etc/ppp/pptpd-options添加logfile /var/log/pptpd.log 尝试过并无效。
所以先注释掉。

添加VPN用户
修改文件/etc/ppp/chap-secrets
username pptpd password *
分别代表用户名,服务,密码,允许IP

添加DNS
修改文件/etc/ppp/options
ms-dns 8.8.8.8
ms-dns 8.8.4.4
上面两个是公用的DNS地址,好记。

编辑/etc/sysctl.conf文件,找到”net.ipv4.ip_forward=1″这一行,去掉前面的注释。
net.ipv4.ip_forward=1
运行下面的命令让配置生效。
sysctl -p

重启pptpd服务
service pptpd restart

开启IP转发
/sbin/iptables -t nat -A POSTROUTING -s 192.168.0.0/24 -o eth0 -j MASQUERADE

配置完成 可以在windows的网络连接中添加vpn了!

分类: 工具 标签:

Html5动态分享

2011年3月20日 没有评论

3月15日,IE9正式发布,来关注下ie9对于html5一系列技术的支持:

  • IE9对CSS3新特性的支持

IE9对于css3的支持力度不够,CSS3动画相关的几个属性是:transition, transform, animation, 对应的是过渡,变换,动画,但是IE9也只是支持一个2D的变换。

其他支持的属性为:border-radius: 边框圆角 opacity:透明度 rgba和hsla是关于颜色的属性,都支持透明参数 box-shadow:图层阴影 Background Size:设置背景图片的大小 Multiple backgrounds:多重背景图象

这些属性的支持也将给前端工作者带来极大的便利。css语言的逐步丰富,可以完成越来越复杂的交互,可以遇见,不久的将来会有越来越多的专职css开发人员。

  • IE9对HTML5特性的支持

    IE9对于html5的支持相对来说比较到位,关注一下IE9不支持的属性:Offline Applications:离线应用

    Web worders:为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法,能够在不影响用户界面的情况下处理任务

    WebSQL Database:客户端的数据库

    IndexDB Database:客户端存储大容量的结构化数据

    Touch Events:触控事件

    History Management:历史管理

    Web Sockets:允许用户在浏览器中实现双向通信,实现数据的及时推送

    Ogg、wav:音频压缩格式

    WebM:媒体文件格式

    以上测试测试数据来自于 Findmebyip.com,findmebyid可以快速检测出浏览器对于HTML5新特性的支持

  • WEBGL
    • WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起 。WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。
    • Firefox 4.0 Beta、Chrome 9.0、Opera预览版、Safari每日构建版都已经提供了对WebGL 1.0的支持
    • WebGL 1.0正式版标准规范全文:http://www.khronos.org/registry/webgl/specs/latest/
    • 示例网站:

  • CSS3
  • Canvas库 – cakejs
    • CAKEjs是一个提供了很多功能模块的canvas库,可以帮你快速解决你的canvas问题
    • 示例demo
    • Apidemo
  • 我的demo
    • 此demo通过Sencha Animator和cakejs来编写的,safari等webkit核心浏览器下还有一个css 3d transform的效果
分类: html5 标签:

Mozilla演示HTML5图片上传DEMO

2011年3月6日 没有评论

分类: html5 标签: