Timeline

to be continued……^_^

 

Timeline for December,2013

2013年12月7日
1. 公开日记.

Timeline for July,2013

2013年7月30日
1. 今天访问这边的速度到挺快的。。。我在想是不是因为之前一直没有动这个网站,导致网站的数据库懒得生锈了所以没法一下子恢复正常的工作状态…在考虑如果这边稳定的话,以后就把百度上面的个人记录搬过来……
2. 给这边添加了GA统计…… 继续加油吧骚年~

2013年7月29日
① 重新开始折腾博客╮(╯▽╰)╭ ,导入了去年8月7日的XML~ 导入的过程中,网址各种500报错无法访问⊙﹏⊙…… 本来还想删掉这个Wordpress重新安装一个的,结果看到创建日期是2013年6月13日…于是还是想等等试试

Timeline for August

2012年8月7日 4th year since 2008.8.7
① 网站的免费空间转战于 freehosting.com

Timeline for July

2012年7月15日
① Add some ADs  on my site:

各位童鞋… 好心的话帮忙点击上面图片注册下呗~ 免费的~ 注册成功后…… 我的网站就基本可以免除月初被封空间的情况了=.=

② 折腾了Java EE 配置……简单实现了下JPA声明式定义实体,以及Hibernate 基础的数据库交互(没有使用Spring的HibernateTemplate哦~~ 因为据说 Hibernate 4,Spring 3.1 就不支持 HibernateTemplate了的说……)

2012年7月14日
① 到学校去把被子等行李搬回家
② 笔记本的无线网卡好像坏掉了!

2012年7月13日
① 工作任务完成了90%+
②  办公室换座位咯~
③ 晚上留下来打 DotA ……  一直随机流 …… 超常发挥……

]2012年7月8日
① @杭州

Keywords:纪念品、抽奖、微博、自荐代码、 iOS、

2012年7月7日
① @杭州

Keywords:打的、高铁、杭州、阿里技术嘉年华、MySQL、拔赤、微博、久八久 、西湖、一个人

2012年7月6日
① iPhone 多视图切换
② 2011年7月发展的那批童鞋,今天终于转正了…… 我也轻松了不少……

2012年7月5日
① iPhone上的 Hello World
② iPhone上的 计算器~

2012年7月4日
① 终于搞定了 Xcode ~ 开始学习~~

2012年7月3日
① 正式实习第一天~  从Web 前端开发实习生被调到了 iPhone 前端开发= = 这……

2012年7月2日
① 网站 down 掉了

2012年7月1日

Continue reading Timeline

Drifting Bottle

Four years ago,

I got a drifting bottle

from you ,

saying hi to me .

 

Nice to see you,

you wrote ,

Let’s be friends.

 

Words saved in

my message box ——

so deep , so sceret.

From time to time ,

I might read.

 

Four years later,

You received a drifting bottle

from me,

saying I love you.

 

Nice to meet you,

I wrote,

Let’s be a couple.

 

Words hidden in

the drifting bottle ——

so deep , so sceret .

Maybe

You’ll never see.

———————

2011.2.6 known

&

2015.1.15 met

Author: XX

2015/7/10

————————————

后记:

习惯性地会将自己写的长的像诗的文字去写成英文,

其实是高中时候经常写一些“英文小诗”。

自娱自乐,自愚自乐

之前写的中文版在这里 《漂流瓶》

2015年7月10日21:41:13

漂流瓶

四年前

我收到一个漂流瓶

里面是你的问候语

 

你说,

很高兴认识你

可以的话,我们交个朋友吧

 

短信里黑色的字

存在信箱里

藏得很深、很深

偶尔

我就去看看

 

四年后

你收到一个漂流瓶

里面是我的悄悄话

 

我说,

很高兴遇见你

可以的话,做我女朋友吧

 

纸条上红色的字

躲在瓶子里

藏得很深、很深

也许

你不会看见

————————–

2011.2.6 相识

&

2015.1.15 相见

写于 2015年7月1日23:26:26 上半部分 完

ps: 文笔渣,等哪天文笔好点了再来修饰修饰吧 =w=

关于 xuxun.me

这个网站也默默地存在了3年多了,一直以来也并没有好好的打理.

期间经历过服务器宕机,被挂木马,数据丢失等等奇奇怪怪的问题

甚至现在每隔一段时间来后台删垃圾评论也成了一种日常。

原先还写过不少跟技术相关的文章,也开发过一些前端的小玩意儿,后来自己越来越懒,也就偶尔记记日记,发发牢骚,换来一个好心情。

还记得以前还至少会有人来看看我这小网站,现在快一年多没有正常人的评论消息了。

当初一时兴起,以自己名字命名的网站就这么慢慢地被我冷落了 _(:з」∠)_

看到这里,如果有人看到的话,估计会以为我要停掉了?

不好意思让你们失望了。。。

我又在立flag打算好好弄这个网站了!

啊哈哈哈哈,

接下来,

有不少新想法,

因为这两年的沉淀,

自己肚子里的代码稍微有了一点点,

自己单反里的照片稍微多了一点点,

还有,

正在酝酿的青春小诗三部曲,

以及未完成的梦想,

我都不会放弃,

那就加油吧。

最后附上自己的Lofter链接~

吃货XX http://liveforfood.lofter.com

清風迅來 http://xu-xun.lofter.com

哦对了

我还建了一个QQ群,

279717899

虽然我知道

然并卵

不过,

永远相信美好的事情即将发生

建群建到群数量上限,

终于确定好这个群号

279717899

爱妻97一起吧~久久~

2015年6月25日22:37:28

wordpress禁用google font

作者:徐迅 XuXun(清风迅来 XX)
最后更新:2014年6月11日0:45:53

前言:google font似乎本身就难以在墙内访问的到,最近一阵子似乎又加大了封锁力度,所以导致原先加载google font的wordpress主题在打开页面时会出现加载速度慢的情况,因而对于受众为国内主流网名的wordpress站点而言,其实禁用google font是个不错的选择。谨以此文作为帮eason同学的阅读博客网站禁用 google font 的技术记录。

原先在网上搜集到以下这一串代码,

 //移除google fonts api
function remove_open_sans_from_wp_core() { 
wp_deregister_style( 'open-sans' );
wp_register_style( 'open-sans', false );
wp_enqueue_style('open-sans','');
}
add_action( 'init', 'remove_open_sans_from_wp_core' );

加上去之后,确实让网页访问速度快了一些.

但eason同学之后又说还是很慢,我再仔细看了下,发现网页上原来不止加载了一份google fonts

 

移除google fonts的bushwick-lato字体
移除google fonts的bushwick-lato字体

于是就依葫芦画瓢,依据原先的格式,补充了一份去除 bushwick-lato 字体的无脑php代码。

//移除google fonts api
function remove_open_sans_from_wp_core() {
 // 移除 open-sans 字体
wp_deregister_style( 'open-sans' );
wp_register_style( 'open-sans', false );
wp_enqueue_style('open-sans','');
// 移除 bushwick-lato 字体
wp_deregister_style( 'bushwick-lato' );
wp_register_style( 'bushwick-lato', false );
wp_enqueue_style('bushwick-lato','');
}

add_action( 'init', 'remove_open_sans_from_wp_core' );

收工~

参考:http://www.liyucang.cn/1289.html

后记:
写这篇文章的时候,突然发现 google 字体又喵地可以正常访问了,大概…… ╮(╯▽╰)╭

徐迅 / 叉叉 / 清风迅来
XuXun / XX / Dalston Xu

【MDN翻译】CSS常见问题

翻译作者:徐迅 XuXun(清风迅来 XX)

最后更新:2015年7月18日11:31:08
原文链接:https://developer.mozilla.org/en-US/docs/Web/CSS/Common_CSS_Questions
译文链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Common_CSS_Questions

1 为什么我的CSS语法正确,但没有正常渲染?

浏览器会根据 DOCTYPE 声明来决定如何渲染网页:更符合Web标准或是更兼容旧版浏览器的bug。

2 为什么我的CSS语法正确,但完全没有渲染?

为了应用CSS,Web服务器必须以 text/css MIME 类型来处理 CSS 样式表;如果Web 服务器不支持该类型,CSS将不会被渲染。

3 id 和 class 有什么区别?

 

4 如何将CSS属性恢复到默认值?

 

5 如何继承CSS规则?

 

6 如何为一个元素设置多个class?

 

7 为什么我的CSS规则没有起作用?

 

8 诸如 -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* 之类的属性的作用是什么?

 

9 z-index 属性与元素定位有什么联系?

 

未完待续

徐迅 / 叉叉 / 清风迅来
XuXun / XX / Dalston Xu

Google Analytics 使用技巧

作者:徐迅 XuXun(清风迅来 XX)

最后更新:2014年5月13日1:16:18

本文为徐迅童鞋在使用Google Analytics(简称GA)过程中学习、整理的一些使用技巧,如有不足或有更好的方案,恳请各位大神指点!

1 如何使用同一份GA统计代码,统计不同子域名网站数据

答:使用“过滤器 Filter”

进入“管理”界面,选定主域名网站所在的“媒体资源”,在“查看”部分中,选择“创建新视图”

新建报告数据视图
新建报告数据视图

创建完之后,在“过滤器”选项中,选择“+新过滤条件”,为过滤器命名:仅 m.aihuishou.com ;

接着最关键的一步到了,“过滤器类型”中选择“预定义过滤器”,在下面的单选框中,选择“仅包含”,“访问主机名的流量”,“等于”,然后在下方输入框中填入子域名的地址:m.aihuishou.com

向数据视图添加过滤条件
向数据视图添加过滤条件

点击保存后,就OK了

过滤器添加成功
过滤器添加成功

本方法的原理其实很简单,

  1. 首先第一步也是很重要的一步是要确保在子域名上也添加了相同的GA统计代码。
  2. 第二步,我们创建了新的数据视图,而这个时候又因为子域名下部署的统计代码属于主域名下的网站,不构成跨域,所以在统计数据中将不仅包含主域名下流量,还会包括子域名下的流量(只要部署了相同的统计代码)。
  3. 第三步,我们其实要做的就是将这份子域名下的流量给剥离出来,这个时候就用到了过滤器,我们设定过滤规则为仅包含该子域名的流量,这样就可以实现在同一份GA媒体资源中,统计单独的子域名网站数据了。

2  如何检测用户在网站上进行了哪些站内搜索操作?

答:很方便。如图,在数据视图分栏下,选择“查看设置”,在最下方找到“网站搜索设置”,开启后,在下方输入框中输入你的网站中搜索输入框的关键词字段的input name即可。

网站搜索设置
网站搜索设置
未完待续
徐迅 / 叉叉 / 清风迅来
XuXun / XX / Dalston Xu

前端开发经验札记

最后更新:2014年5月1日1:57:33

作者: 徐迅 (清风迅来 XX)

真正从事Web前端开发有一年多了,而接触前端最早可以追溯至小学时候电脑课上的网页制作,那个时候还在使用Front Page(我才不会说那个时候自己设计的网页巨丑…);后来一直到大学才“重拾旧业”:大二曾帮老师做过课程介绍网站,使用的仍然是DreamWeaver,并开始搭建 xuxun.me ;大三拥抱notepad++和zen-coding,开始折腾JavaEE的项目;大四毕业设计又回归PHP,偶尔接触了Python;工作以后爱上sublime text 2、less和coffee script,在C#坑中渐行渐远。

希望这篇文章能一直更新下去吧.

加油XX,奔跑在大前端之路上吧!

一、前端语言基础

(一)HTML

     1 标签语义化:使用合适标签,少使用无语义标签
     2 使用 <!DOCTYPE html> 既可以向前兼容,又体现了你网站的高大上!
     3

(二)CSS

     1 选择一款合适的CSS预处理语言(个人比较喜欢Less),大大提升CSS编写效率
     2 通用的样式提取成 .class 或者 less 中的 mixin() {} 更佳
     3 多使用限定度高的选择器, 例如 > + , 尽量避免后代选择器过度使用
     4 多用组合少用继承,减少耦合
     5 选择器权重222原则(XX自创……): 选择器权重不超过222,即最多2个id,2个class和2个tag……
     6 CSS伪类是个神器,例如使用:hover、:after等伪类可以替代JS实现不少效果

(三)JavaScript

     1 JS我是渣.

二、前端框架基础

(一) Bootstrap

     1 Bootstrap 的less 代码质量好,价值高,推荐学习

(二)JQuery Mobile

     1 深坑,慎入

三、前端杂七杂八

     1 适当了解浏览器的渲染机制,避免代码性能过低
     2 替换 .class 优于 替换 <xx style=”xx:xx;” ></xx>
     3 图片记得压缩, jpegtran 是个不错的jpg图片无损压缩工具

四、前端各种坑爹

1 IE 7 不支持 console.log ,因为 IE7 根本没有 console ,所以当你使用 IE 7 运行有 console.log 的页面你会悲剧..
2. IE6 同一个html元素上挂多个class 并且css样式也有多个 .class1 .class2 会以最后一条为准

 

徐迅 / 清风迅来

XX   / Dalston Xu

Google

解决Swiper中translate3d导致字体模糊

2014年4月11日0:34:17

今天公司的设计师sama跟我说,官网旧机回收首页上有个UI问题,说是用户晒单那部分的字体模糊,如下图所示:

translate3d导致字体模糊
translate3d导致字体模糊

(PS:以上原先是#666的字体颜色,为了使效果更明显于是我改成#000,原先在浏览器上比这个更模糊的画面木有截取下来= =)

嗯,这是使用了 swiper 插件,导致了文字出现了模糊。(不过在firefox、IE中倒是好的!)

于是乎我就开始找问题原因之所在咯,第一个想到是不是字号大小不一致,结果我查看了下一切都正常都是12px,特地调大还是会有模糊。

接着我想到的就是去swiper的官网上看看它的API上有木有相关的方法。

结果还真有一个:手册上有一个参数名是: useCSS3Transforms ,默认为true的,改成 false即可。

但是如果真的这么快就可以解决这个问题的话,我就用不着大费周折写这篇文章了吧……

所以结果是虽然修复了字体模糊问题,但是带来了另一个大问题.. chrome下每次滚动竟然4个一起滚了(原先每次移动1个项的)… orz ..!

于是没办法,只好在保持使用 css3 transform 的 translate3d 的情况下,继续寻找解决方案了。

在stackoverflow上,我也找到相关技术的话题讨论: http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d

网上有说是使用:     -webkit-font-smoothing: subpixel-antialiased; 这个的

也有说使用  -webkit-perspective: 1000; 这个的…

当然结果也都是木有用……

我甚至在 github 上面swiper官方的issue中找到了相关问题: https://github.com/nolimits4web/Swiper/issues/45 但问题是作者似乎木有给出有效解决方案=-=

倒是解释了下为何使用 translate3d,说是这样可以强制浏览器使用GPU来渲染,可以大大提高页面的性能,尤其是移动端(但会在一定程度上降低质量…正如API文档中所写的)

好吧,最终,又是经由API文档中另外一个参数的启发:

 roundLengths
Set to true and Swiper will round width/height values, may be useful if you have rounding errors (like 833.48px width) in responsive swiper.

于是就想是不是因为外围容器它的 translate3d 属性有小数的原因。

然后我就去看了下,结果还真是如此! 哦也!

我发现当 translate3d 属性中只要出现小数,那么容器中的文字就会有一定程度的模糊,当该属性为 *.5 时,模糊的现象最严重。

translate3d的值出现小数时会导致文字模糊
translate3d的值出现小数时会导致文字模糊

当这个值为整数的时候就木有模糊现象了!

于是就决定更新容器宽度,使之能被4整除!

这样就解决该问题了…

translate3d的值改为整数以后文字就不模糊了
translate3d的值改为整数以后文字就不模糊了

SO,现在看起来舒服多了吧~

另外: IE11 下,在 dulplicate的slide中,用户的微博头像会错位… 这个问题有点坑。。倒是IE10等都是好的..

XuXun 清风迅来

2014年4月11日0:09:01

【MDN翻译】响应式Web设计

最后更新:2014年4月3日1:32:48

Contributor:清风迅来

原文链接:https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design

 

随着越来越多的用户使用移动设备来浏览网站和应用,Web设计人员和开发人员需要确保他们的作品在移动设备上同样能正常运作,并且看上去和在传统台式电脑上一样好。 著名设计师 Luke Wroblewski 主张 “移动优先” 设计而不是为桌面端设计完之后再考虑移动端。 无论您将移动设备作为主要目标来设计或作为额外目标,您都可以借助强大的CSS来保证同样的内容从手机到宽屏高分辨率显示器上,实现跨全部硬件平台访问和适应。

这种方法被称为“响应式 Web 设计”。它的一些策略包括::

  • 流式布局: 按照浏览器视窗的百分比来设定所有容器的宽度,从而使容器在浏览器窗口大小变化时自动缩放。
  • 媒体查询: 基于显示设备的物理特性(例如:尺寸、分辨率、宽高比、颜色位深等)来调用不同的样式表。
  • 流式图片: 设置图像所占宽度至多为设备的最大宽度。

Firefox Marketplace 的最低需求

如果您提交一个应用到 Firefox OS 或 Firefox for Android 上的Firefox Marketplace,那么这个应用必须响应不同的手机屏幕尺寸和屏幕像素密度。请记住屏幕最小尺寸为 320 * 480 像素。另一个常见的错误是未识别屏幕像素密度,以至于没有相应地调整字体大小和触摸目标。欲了解更多信息, 请参阅 Marketplace 审查准则

相关资源

概述

技术文档

工具

样例

译注:这篇响应式设计的概述简单地介绍了一些响应式策略,又疑似顺便为Firefox Marketplace 做了个小广告..
之后提及的一些资料,其中的pointer media query 似乎有点意思,这个是根据不同的物理指针(pointer)的精度作为media query的查询条件,比方说鼠标就是fine,表示精度很高,普通的触屏设备比如pad啊mobile啊之类就是coarse,不具备任何指针的就是none(似乎很少见诶)……
不过呢,好像这货CSS 4 才支持哦….