An Yan
title: flexbox在移动端的兼容性实战 categories: - Code tags: - WebKit - CSS - 兼容性 - flex date: 2015-12-17 16:20:21 --- 之前曾经写过文章介绍flexbox布局，这个玩意相比与传统的float布局，简直是大大解放了生产力。但是说到应用于生产的话，flex布局的兼容性实在是让人没信心。PC端彻底没戏，IE10才支持部分混合语法；不过caniuse上查阅到的移动端兼容性还算不错，Android2.1起开始支持旧语法，iOS safari从3.2开始支持旧语法。在v2上查阅了些帖子，很多人说移动端上兼容是坑，不过观察可知，大部分人都没有专门去研究旧语法。flex在移动端表现究竟如何，本文来探讨下这个话题。 先来看一眼Caniuse上的资料吧。 |Android|2.1-4.3|4.4+| | --- | --- | --- | |支持情况|旧语法(不支持换行)，需要带-webkit-前缀|新语法|...
title: 《WebKit技术内幕》——脑图笔记 categories: - Code tags: - WebKit date: 2015-10-25 19:48:41 --- 最近把《WebKit技术内幕》这本书读了一遍。这本书其实更适合浏览器开发工程师来看，对于我这种前端工程师来说，可能没必要深究某处实现的细节，书中有的地方如果能讲的更抽象些就更好了。这里把脑图存一下档。 一开始还是细读，读到后面发现涉及到具体类的实现部分蛮晦涩的，于我收益也不大，于是变成跳读了。 比较涨姿势的地方还是网页资源加载与渲染的流程~ PS. 找配图可真难，特别是文章上方的大图，蛋疼~ *** ##### 浏览器与浏览器内核  ##### HTML网页与结构  ##### Webkit架构和模块  ##### 资源加载和网络栈 ...
title: 玉泉通过ipv6来使用shadowsocks categories: - Code tags: - ipv6 - shadowsocks - GFW date: 2015-10-13 02:35:41 --- 今年暑假期间GFW大升级，在机器学习、数据挖掘、深度包检测等装备全面部署下的GFW火力大大提升，导致杭州电信环境下shadowsocks可用性大幅降低，在Linode、DO、conoha等家的vps上架设的shadowsocks被打击严重，难以正常使用。试用ipv6，发现效果还可以，可能功夫网gfw对ipv6的针对力度还不大。下面说一下流程。 首先你需要分配到一个ipv6地址。 据说玉泉的有线网络会自动分配一个ipv6地址，我是一直使用无线（ZJUWLAN）的，有线的情况不清楚，不过到底有没有拿到ipv6访问后文的网址就知道了。其实我个人感觉用ZJUWLAN + 自建VPN方式通用性大一点，寝室教室都能用。如果你说wifi信号不好，那就没办法了.. 第一步，使用ZJUWLAN的话，通过自建VPN方式登录。（不能使用网页认证方式登录，那种方式拿不到ipv6） 在偏好设置-网络中，新建一个l2tp的vpn，按图配置。点击鉴定设置，密码中填入VPN密码。高级中，确保“通过VPN连接发送所有流量”为非勾选状态。  这时在接入ZJUWLAN后，连接这个VPN就可以接入外网了。偶尔会出鉴定失败什么的错误，多试几次就可以上了。 这里如果有问题可以参考下98的这个帖子 [网络问题日经帖之终结帖！](http://www.cc98.org/dispbbs.asp?boardid=226&id=4551270) 第二步，点击左边的 + 号，新建一个6...
title: 在mac下配置wine环境——自己wine一个小游戏 categories: - Code tags: - wine - wineskin - mac - windows date: 2015-10-12 21:55:41 --- 当我们想要在 mac 上运行 labview 等 windows 下的大型软件时，使用 PD 等虚拟机可以很好的解决需求；然而如果我们只想玩些同人小游戏什么的，再开一个操作系统就觉得有点累赘了，这时我们可以选择[wine](https://www.winehq.org/)，更加轻量的执行 windows 应用。 wine...
title: 使用pi-gpio控制树莓派GPIO categories: - Code tags: - Javascript - Nodejs - Raspberry Pi date: 2015-09-08 10:49:41 --- 尝试使用pi-gpio来控制树莓派GPIO，踩坑一晚，特此记录。 #### 一、在pi上安装新版本的nodejs 我如果直接用`sudo apt-get install nodejs`安装得到的nodejs发现是0.6版本的，npm版本才1.x，太落后了，各种无法使用，所以使用了其他方法。 ``` //Adding the Package Repository curl...
title: 《HTTP权威指南》笔记——各章脑图 categories: - Code tags: - HTTP - HTTPS - TCP date: 2015-09-06 10:11:41 --- 《HTTP权威指南》看起来厚厚的600多页，读起来确意外的轻松。不过对于这种工具书，通读一遍之后往往有种“学了好多新知识，但啥也没记住”的感觉。于是速读了第二遍并做了些笔记。 PS. 众所周知前几天shadowsocks项目被爆破了，我在linode上搭的ss也屡遭针对，后来不得已试着切换到了conoha东京机房，但是ss在使用了不到1天后依然被墙。后来尝试其他姿势，lantern时断时续的根本不好用，日本机房的VPS几乎都无法搭可行的ss了，后来试着用squid搭了个https代理，结果真的是秒封（笑），搭建完之后上了一下youtube，就30秒不到，就再也ping不通服务器了。现在在蹭同学搬瓦工的ss，速度不理想，勉强用用，唉，真惨。 不过前几天因为兴趣倒是研究了些shadowsocks、VPN的原理，正好也看了些HTTP、TCP知识，打算写篇有关翻墙的文整理一下。大概包括常用的翻墙手段的原理，以及针对某些梯子的GFW的封锁手段。 *** ##### HTTP概述  ##### URL与资源  ##### HTTP报文 ...
title: 谈谈网页中的Animation categories: - Code tags: - Javascript - html - css - canvas - Animation date: 2015-08-24 20:47:41 --- 一个有关 Animation 的小小分享。 ##### 浏览器中的动画类型 ###### 声明式 声明式动画，如 CSS3 Animation。...
title: 谈谈居中与flexbox(7.18修订~) categories: - Code tags: - css - 布局 - 居中 - flexbox date: 2015-07-18 10:01:00 --- 之前的版本主要是自己搜集网上资料整理所得，最近偶然看到大搜车的这篇[有关居中的文章](http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/)，总结的真是详细级了，于是对自己的这篇5月份的文章进行一下补充。 ###### 谈谈居中 居中分为水平居中与垂直居中。 水平居中常用的解决方案有： * text-align:center; * margin-left:auto;margin-right:auto; * position:relative;left:50%;margin-left:-width; 至于垂直居中，大概常用的就是：...
title: 迟来的关于ifetask0003的总结 categories: - Code tags: - Javascript - html - css date: 2015-07-14 23:44:41 metaAlignment: left --- 不好意思，很久没有更新blog了。ifetask0003大概6月下旬完成，后来面临期末考试等杂七杂八的事项，一直没能拿出时间写文。 ifetask0003是一个webapp的应用，在写之前我曾犹豫过要不要使用angular这种框架，后来看要求说不推荐使用框架，那么也就自己纯js实现一下吧。 时间拖了有点久了，现在看了看，也没回忆起多少，大概就这2点： **平稳退化** 编写这个webapp时用到了一些html5的标签，比如上方的标题用header简直再合适不过了。而对于兼容性则使用html5shiv来处理。 提到这些，是想表达我的一个观点：技术，在有shim方案的情况下，能用新的就用新的。之前在公司的一个项目中，有一个小小的打分模块：  背后的圆环要根据分数显示。同事跟我讲，之前做过这个东西了，可以拿来复用，我看了下之前是通过CSS做的，很复杂，两张图片交叠，高级浏览器使用CSS3的旋转，低级浏览器好像是使用了什么数学函数，结果IE7还不支持，蛋疼菊紧。 其实这个东西一眼看上去就可以用canvas做的。canvas的shim方案大佬谷歌有提供：excanvas。这个库的功能是在低版本IE将canvas转变为VML对象进行绘制。当然，过于复杂的操作是不支持，不过画个弧，设置个线宽，设置个颜色还是小轻松的——而且学习成本非常低廉。于是最终用canvas + excanvas，不需要其他学习成本，顺利实现IE7+的圆弧绘制。 这也是我逐渐感悟到的：熟悉IE6、IE7的各种bug各种缺陷各种hack有个卵用，这些浏览器逐渐都被淘汰，现在为了掌握各种奇技淫巧所花的时间最后终将成为无用的沉默成本。能用高级技巧+shim就要抛弃低级的奇技淫巧，能用ES6+babel就大胆用ES6，开发者的时间应该花费在美好的事物上，而不是给IE擦屁股。...
title: Javascript中如何遍历属性 categories: - Code tags: - Javascript date: 2015-04-16 23:25:00 --- JS中遍历对象的属性有多种情况。对象的属性即有属于自身的，也有从原型链上继承而来的。并且有的属性是可以枚举的，有的属性是不可枚举的，这由对象属性的可枚举性[[enumerable]]来确定。 遍历时我们可能用到的手段： 1. Object.keys(obj) 遍历某对象的自身的可枚举属性 2. Object.getOwnPropertyNames(obj) 遍历某对象的自身的所有属性 3. for in 遍历某对象的自身和继承的可枚举属性(如果结合hasOwnProperty可过滤继承的属性实现1) 4. 至于遍历某对象的自身和继承的所有属性，需要结合2与3点。